/* Generated by site/library_systems.py from the engine; do not edit. Each look, scoped to .odl-sys-<key>. */
.odl-sys-pebbleday {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #e0457b;
  --ds-color-neutral-light-1: #fefcfb;
  --ds-color-neutral-light-2: #f7f3f1;
  --ds-color-neutral-light-3: #efebe8;
  --ds-color-neutral-light-4: #e7e2de;
  --ds-color-neutral-light-5: #dfd9d5;
  --ds-color-neutral-light-6: #d8d1cc;
  --ds-color-neutral-light-7: #d0c8c2;
  --ds-color-neutral-light-8: #8d857f;
  --ds-color-neutral-light-9: #7d746d;
  --ds-color-neutral-light-10: #6b635d;
  --ds-color-neutral-light-11: #5e5651;
  --ds-color-neutral-light-12: #272321;
  --ds-color-neutral-dark-1: #161514;
  --ds-color-neutral-dark-2: #1f1d1b;
  --ds-color-neutral-dark-3: #272522;
  --ds-color-neutral-dark-4: #312d2a;
  --ds-color-neutral-dark-5: #3a3532;
  --ds-color-neutral-dark-6: #443e3a;
  --ds-color-neutral-dark-7: #4e4742;
  --ds-color-neutral-dark-8: #877f79;
  --ds-color-neutral-dark-9: #8a817b;
  --ds-color-neutral-dark-10: #9d948d;
  --ds-color-neutral-dark-11: #b2aaa4;
  --ds-color-neutral-dark-12: #ede8e4;
  --ds-color-accent-light-1: #fffcfd;
  --ds-color-accent-light-2: #fff1f4;
  --ds-color-accent-light-3: #ffe5eb;
  --ds-color-accent-light-4: #ffdae2;
  --ds-color-accent-light-5: #ffced9;
  --ds-color-accent-light-6: #ffc2d0;
  --ds-color-accent-light-7: #ffb6c7;
  --ds-color-accent-light-8: #d06382;
  --ds-color-accent-light-9: #d13c71;
  --ds-color-accent-light-10: #bf3366;
  --ds-color-accent-light-11: #a12754;
  --ds-color-accent-light-12: #592132;
  --ds-color-accent-light-solid-pressed: #b5295e;
  --ds-color-accent-dark-1: #1f1618;
  --ds-color-accent-dark-2: #2a1c20;
  --ds-color-accent-dark-3: #3b2027;
  --ds-color-accent-dark-4: #4b232e;
  --ds-color-accent-dark-5: #5c2636;
  --ds-color-accent-dark-6: #6d283e;
  --ds-color-accent-dark-7: #812745;
  --ds-color-accent-dark-8: #d5567e;
  --ds-color-accent-dark-9: #e0457b;
  --ds-color-accent-dark-10: #ec5788;
  --ds-color-accent-dark-11: #ff87a8;
  --ds-color-accent-dark-12: #fdc8d4;
  --ds-color-accent-dark-solid-pressed: #f86191;
  --ds-color-accent2-light-1: #fffcfa;
  --ds-color-accent2-light-2: #faf3ed;
  --ds-color-accent2-light-3: #f7e9dd;
  --ds-color-accent2-light-4: #f5dfcc;
  --ds-color-accent2-light-5: #f3d5bb;
  --ds-color-accent2-light-6: #f0cbaa;
  --ds-color-accent2-light-7: #eec199;
  --ds-color-accent2-light-8: #b17b46;
  --ds-color-accent2-light-9: #ac6402;
  --ds-color-accent2-light-10: #9c5a00;
  --ds-color-accent2-light-11: #814a00;
  --ds-color-accent2-light-12: #492e11;
  --ds-color-accent2-light-solid-pressed: #905300;
  --ds-color-accent2-dark-1: #1b1815;
  --ds-color-accent2-dark-2: #241f1a;
  --ds-color-accent2-dark-3: #31251c;
  --ds-color-accent2-dark-4: #3d2c1d;
  --ds-color-accent2-dark-5: #49331f;
  --ds-color-accent2-dark-6: #563a20;
  --ds-color-accent2-dark-7: #64401d;
  --ds-color-accent2-dark-8: #aa7746;
  --ds-color-accent2-dark-9: #b2773d;
  --ds-color-accent2-dark-10: #c0844a;
  --ds-color-accent2-dark-11: #daa16b;
  --ds-color-accent2-dark-12: #e7d2bf;
  --ds-color-accent2-dark-solid-pressed: #ca8e53;
  --ds-color-accent3-light-1: #fdfcff;
  --ds-color-accent3-light-2: #f6f3fb;
  --ds-color-accent3-light-3: #efe9fa;
  --ds-color-accent3-light-4: #e9dff9;
  --ds-color-accent3-light-5: #e3d4f8;
  --ds-color-accent3-light-6: #dccaf7;
  --ds-color-accent3-light-7: #d6c0f6;
  --ds-color-accent3-light-8: #9679bc;
  --ds-color-accent3-light-9: #8b62bb;
  --ds-color-accent3-light-10: #7e58aa;
  --ds-color-accent3-light-11: #68478f;
  --ds-color-accent3-light-12: #3c2d4f;
  --ds-color-accent3-light-solid-pressed: #754fa1;
  --ds-color-accent3-dark-1: #19181c;
  --ds-color-accent3-dark-2: #211f26;
  --ds-color-accent3-dark-3: #2b2533;
  --ds-color-accent3-dark-4: #342c40;
  --ds-color-accent3-dark-5: #3e334d;
  --ds-color-accent3-dark-6: #48395b;
  --ds-color-accent3-dark-7: #53406b;
  --ds-color-accent3-dark-8: #9176b5;
  --ds-color-accent3-dark-9: #9676bf;
  --ds-color-accent3-dark-10: #a383cd;
  --ds-color-accent3-dark-11: #bd9fe5;
  --ds-color-accent3-dark-12: #dcd1eb;
  --ds-color-accent3-dark-solid-pressed: #ad8dd7;
  --ds-color-success-light-1: #f9fef9;
  --ds-color-success-light-2: #ebf7ed;
  --ds-color-success-light-3: #d9f1dd;
  --ds-color-success-light-4: #c6eccc;
  --ds-color-success-light-5: #b2e7bc;
  --ds-color-success-light-6: #9de2ab;
  --ds-color-success-light-7: #87dc9a;
  --ds-color-success-light-8: #089a47;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #003d17;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #131a15;
  --ds-color-success-dark-2: #18221a;
  --ds-color-success-dark-3: #172c1c;
  --ds-color-success-dark-4: #15361d;
  --ds-color-success-dark-5: #11401f;
  --ds-color-success-dark-6: #084a20;
  --ds-color-success-dark-7: #005423;
  --ds-color-success-dark-8: #199547;
  --ds-color-success-dark-9: #009845;
  --ds-color-success-dark-10: #00a74c;
  --ds-color-success-dark-11: #47c26c;
  --ds-color-success-dark-12: #b9dfc0;
  --ds-color-success-dark-solid-pressed: #19b155;
  --ds-color-warning-light-1: #fffcf8;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f5ead9;
  --ds-color-warning-light-4: #f1e1c6;
  --ds-color-warning-light-5: #eed8b3;
  --ds-color-warning-light-6: #ebce9f;
  --ds-color-warning-light-7: #e7c58b;
  --ds-color-warning-light-8: #aa7f2c;
  --ds-color-warning-light-9: #efb239;
  --ds-color-warning-light-10: #dda331;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #463001;
  --ds-color-warning-light-solid-pressed: #d29921;
  --ds-color-warning-dark-1: #1b1813;
  --ds-color-warning-dark-2: #241f18;
  --ds-color-warning-dark-3: #2f2618;
  --ds-color-warning-dark-4: #3a2d18;
  --ds-color-warning-dark-5: #463516;
  --ds-color-warning-dark-6: #523c14;
  --ds-color-warning-dark-7: #604306;
  --ds-color-warning-dark-8: #a47b2f;
  --ds-color-warning-dark-9: #e6b55d;
  --ds-color-warning-dark-10: #f7c56e;
  --ds-color-warning-dark-11: #fecf7f;
  --ds-color-warning-dark-12: #ebdbc0;
  --ds-color-warning-dark-solid-pressed: #ffd388;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fff1ef;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #d76258;
  --ds-color-danger-light-9: #d93834;
  --ds-color-danger-light-10: #c72f2c;
  --ds-color-danger-light-11: #a82321;
  --ds-color-danger-light-12: #5c201c;
  --ds-color-danger-light-solid-pressed: #bc2323;
  --ds-color-danger-dark-1: #1e1715;
  --ds-color-danger-dark-2: #291d1c;
  --ds-color-danger-dark-3: #39221f;
  --ds-color-danger-dark-4: #492622;
  --ds-color-danger-dark-5: #592a26;
  --ds-color-danger-dark-6: #692e29;
  --ds-color-danger-dark-7: #7c2f2a;
  --ds-color-danger-dark-8: #ce6157;
  --ds-color-danger-dark-9: #db5c52;
  --ds-color-danger-dark-10: #ea6a5f;
  --ds-color-danger-dark-11: #ff8c80;
  --ds-color-danger-dark-12: #f9cbc5;
  --ds-color-danger-dark-solid-pressed: #f57468;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eaf6ff;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed1;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #101920;
  --ds-color-info-dark-2: #12212c;
  --ds-color-info-dark-3: #062a40;
  --ds-color-info-dark-4: #00334e;
  --ds-color-info-dark-5: #003b5a;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089c9;
  --ds-color-info-dark-9: #008bcd;
  --ds-color-info-dark-10: #0099e0;
  --ds-color-info-dark-11: #3ab6ff;
  --ds-color-info-dark-12: #abdcff;
  --ds-color-info-dark-solid-pressed: #00a3ee;
  --ds-color-neutral-alpha-light-2: rgb(110 37 0 / 0.055);
  --ds-color-neutral-alpha-light-3: rgb(79 35 2 / 0.091);
  --ds-color-neutral-alpha-light-4: rgb(70 32 1 / 0.13);
  --ds-color-neutral-alpha-light-5: rgb(61 25 0 / 0.165);
  --ds-color-neutral-alpha-light-6: rgb(60 25 0 / 0.2);
  --ds-color-neutral-alpha-light-7: rgb(59 26 1 / 0.24);
  --ds-color-neutral-alpha-light-8: rgb(28 12 0 / 0.502);
  --ds-color-neutral-alpha-light-9: rgb(28 12 0 / 0.573);
  --ds-color-neutral-alpha-light-10: rgb(22 10 0 / 0.636);
  --ds-color-neutral-alpha-light-11: rgb(19 8 0 / 0.683);
  --ds-color-neutral-alpha-light-12: rgb(7 2 0 / 0.871);
  --ds-color-neutral-alpha-dark-2: rgb(253 226 199 / 0.039);
  --ds-color-neutral-alpha-dark-3: rgb(255 240 212 / 0.073);
  --ds-color-neutral-alpha-dark-4: rgb(255 228 210 / 0.116);
  --ds-color-neutral-alpha-dark-5: rgb(254 227 214 / 0.155);
  --ds-color-neutral-alpha-dark-6: rgb(254 228 212 / 0.198);
  --ds-color-neutral-alpha-dark-7: rgb(254 228 211 / 0.241);
  --ds-color-neutral-alpha-dark-8: rgb(255 240 228 / 0.485);
  --ds-color-neutral-alpha-dark-9: rgb(255 238 227 / 0.498);
  --ds-color-neutral-alpha-dark-10: rgb(255 240 229 / 0.58);
  --ds-color-neutral-alpha-dark-11: rgb(255 243 235 / 0.67);
  --ds-color-neutral-alpha-dark-12: rgb(255 250 245 / 0.923);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-25: 1.5625rem;
  --ds-font-size-39: 2.4375rem;
  --ds-font-size-49: 3.0625rem;
  --ds-font-size-76: 4.75rem;
  --ds-font-size-95: 5.9375rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-48: 48px;
  --ds-font-line-height-56: 56px;
  --ds-font-line-height-84: 84px;
  --ds-font-line-height-108: 108px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 710ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 650;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-20);
  --ds-text-body-lg-line-height: 1.4;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-20);
  --ds-text-title-md-line-height: 1.4;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-25);
  --ds-text-title-lg-line-height: 1.44;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-39);
  --ds-text-headline-sm-line-height: 1.2308;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: -0.01em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-39)/calc(1.2308 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-49);
  --ds-text-headline-lg-line-height: 1.1429;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.02em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-49)/calc(1.1429 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-display-md-size: var(--ds-font-size-76);
  --ds-text-display-md-line-height: 1.1053;
  --ds-text-display-md-weight: var(--ds-font-weight-heading);
  --ds-text-display-md-tracking: -0.02em;
  --ds-text-display-md-family: var(--ds-font-family-display);
  --ds-text-display-md: var(--ds-font-weight-heading) var(--ds-font-size-76)/calc(1.1053 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-display-lg-size: var(--ds-font-size-95);
  --ds-text-display-lg-line-height: 1.1368;
  --ds-text-display-lg-weight: var(--ds-font-weight-heading);
  --ds-text-display-lg-tracking: -0.02em;
  --ds-text-display-lg-family: var(--ds-font-family-display);
  --ds-text-display-lg: var(--ds-font-weight-heading) var(--ds-font-size-95)/calc(1.1368 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-25);
  --ds-text-numeric-lg-line-height: 1.44;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-8);
  --ds-radius-control: var(--ds-radius-16);
  --ds-radius-control-sm: var(--ds-radius-12);
  --ds-radius-container: var(--ds-radius-24);
  --ds-radius-overlay: var(--ds-radius-32);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 8px;
  --ds-radius-focus: 18px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-1);
  --ds-color-surface-tinted: var(--ds-color-accent-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-accent2: var(--ds-color-accent2-light-11);
  --ds-color-text-on-accent2: var(--ds-color-white);
  --ds-color-text-accent3: var(--ds-color-accent3-light-11);
  --ds-color-text-on-accent3: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-accent2-subtle: var(--ds-color-accent2-light-3);
  --ds-color-bg-accent2-bold: var(--ds-color-accent2-light-9);
  --ds-color-bg-accent2-bold-hover: var(--ds-color-accent2-light-10);
  --ds-color-bg-accent2-bold-pressed: var(--ds-color-accent2-light-solid-pressed);
  --ds-color-bg-accent3-subtle: var(--ds-color-accent3-light-3);
  --ds-color-bg-accent3-bold: var(--ds-color-accent3-light-9);
  --ds-color-bg-accent3-bold-hover: var(--ds-color-accent3-light-10);
  --ds-color-bg-accent3-bold-pressed: var(--ds-color-accent3-light-solid-pressed);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-5);
  --ds-color-border-default: var(--ds-color-neutral-light-6);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-3);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(39 35 33 / 0.45);
  --ds-color-shadow-key: rgb(39 35 33 / 0.107);
  --ds-color-shadow-ambient: rgb(39 35 33 / 0.091);
  --ds-color-shadow-ring: rgb(39 35 33 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-pebbleday { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-pebbleday { --ds-size-target-min: 44px; } }
.odl-sys-fernhollow {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #1e3a8a;
  --ds-color-neutral-light-1: #fcfdff;
  --ds-color-neutral-light-2: #f1f4fa;
  --ds-color-neutral-light-3: #e8ecf3;
  --ds-color-neutral-light-4: #dee3ec;
  --ds-color-neutral-light-5: #d5dbe6;
  --ds-color-neutral-light-6: #ccd2df;
  --ds-color-neutral-light-7: #c2cad8;
  --ds-color-neutral-light-8: #7f8796;
  --ds-color-neutral-light-9: #6d7686;
  --ds-color-neutral-light-10: #5c6474;
  --ds-color-neutral-light-11: #505765;
  --ds-color-neutral-light-12: #222428;
  --ds-color-neutral-dark-1: #141518;
  --ds-color-neutral-dark-2: #1b1d21;
  --ds-color-neutral-dark-3: #22252b;
  --ds-color-neutral-dark-4: #2a2e35;
  --ds-color-neutral-dark-5: #32363f;
  --ds-color-neutral-dark-6: #3a3f49;
  --ds-color-neutral-dark-7: #424854;
  --ds-color-neutral-dark-8: #79808f;
  --ds-color-neutral-dark-9: #7a8293;
  --ds-color-neutral-dark-10: #8d96a7;
  --ds-color-neutral-dark-11: #a3abbb;
  --ds-color-neutral-dark-12: #e6e9ee;
  --ds-color-accent-light-1: #fcfdff;
  --ds-color-accent-light-2: #f1f4fc;
  --ds-color-accent-light-3: #e4ecfb;
  --ds-color-accent-light-4: #d8e3fb;
  --ds-color-accent-light-5: #cbdbfc;
  --ds-color-accent-light-6: #bfd2fc;
  --ds-color-accent-light-7: #b3cafb;
  --ds-color-accent-light-8: #6b85c3;
  --ds-color-accent-light-9: #1e3a8a;
  --ds-color-accent-light-10: #173076;
  --ds-color-accent-light-11: #152a67;
  --ds-color-accent-light-12: #1a2745;
  --ds-color-accent-light-solid-pressed: #10266b;
  --ds-color-accent-dark-1: #16181d;
  --ds-color-accent-dark-2: #1c2027;
  --ds-color-accent-dark-3: #202737;
  --ds-color-accent-dark-4: #252f46;
  --ds-color-accent-dark-5: #2a3755;
  --ds-color-accent-dark-6: #2f3f65;
  --ds-color-accent-dark-7: #324778;
  --ds-color-accent-dark-8: #6280c7;
  --ds-color-accent-dark-9: #5f82d4;
  --ds-color-accent-dark-10: #6c8fe2;
  --ds-color-accent-dark-11: #88abfa;
  --ds-color-accent-dark-12: #c8d6f3;
  --ds-color-accent-dark-solid-pressed: #7599ed;
  --ds-color-success-light-1: #f9fefa;
  --ds-color-success-light-2: #edf6ef;
  --ds-color-success-light-3: #ddf0e0;
  --ds-color-success-light-4: #cdead2;
  --ds-color-success-light-5: #bce4c3;
  --ds-color-success-light-6: #abdeb4;
  --ds-color-success-light-7: #99d8a5;
  --ds-color-success-light-8: #409758;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #0d3c1c;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #151915;
  --ds-color-success-dark-2: #1a211b;
  --ds-color-success-dark-3: #1b2b1e;
  --ds-color-success-dark-4: #1c3422;
  --ds-color-success-dark-5: #1d3e25;
  --ds-color-success-dark-6: #1d4828;
  --ds-color-success-dark-7: #17532a;
  --ds-color-success-dark-8: #419156;
  --ds-color-success-dark-9: #349551;
  --ds-color-success-dark-10: #43a25e;
  --ds-color-success-dark-11: #68be7c;
  --ds-color-success-dark-12: #c0ddc5;
  --ds-color-success-dark-solid-pressed: #4eac67;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f4eada;
  --ds-color-warning-light-4: #f1e1c8;
  --ds-color-warning-light-5: #edd8b5;
  --ds-color-warning-light-6: #eacea2;
  --ds-color-warning-light-7: #e6c58e;
  --ds-color-warning-light-8: #a87f33;
  --ds-color-warning-light-9: #edb344;
  --ds-color-warning-light-10: #dba43c;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #453005;
  --ds-color-warning-light-solid-pressed: #d09a2f;
  --ds-color-warning-dark-1: #1a1814;
  --ds-color-warning-dark-2: #231f19;
  --ds-color-warning-dark-3: #2e2619;
  --ds-color-warning-dark-4: #3a2e19;
  --ds-color-warning-dark-5: #453518;
  --ds-color-warning-dark-6: #513c17;
  --ds-color-warning-dark-7: #5e440d;
  --ds-color-warning-dark-8: #a27b35;
  --ds-color-warning-dark-9: #e4b563;
  --ds-color-warning-dark-10: #f5c573;
  --ds-color-warning-dark-11: #fccf84;
  --ds-color-warning-dark-12: #e3d4bb;
  --ds-color-warning-dark-solid-pressed: #ffd286;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fdf2f0;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #ca6b61;
  --ds-color-danger-light-9: #c94b43;
  --ds-color-danger-light-10: #b7423a;
  --ds-color-danger-light-11: #9a342e;
  --ds-color-danger-light-12: #562521;
  --ds-color-danger-light-solid-pressed: #ae3832;
  --ds-color-danger-dark-1: #1d1716;
  --ds-color-danger-dark-2: #271e1c;
  --ds-color-danger-dark-3: #362320;
  --ds-color-danger-dark-4: #442825;
  --ds-color-danger-dark-5: #532d29;
  --ds-color-danger-dark-6: #62322d;
  --ds-color-danger-dark-7: #733630;
  --ds-color-danger-dark-8: #c1685f;
  --ds-color-danger-dark-9: #cc655c;
  --ds-color-danger-dark-10: #da7268;
  --ds-color-danger-dark-11: #f49186;
  --ds-color-danger-dark-12: #f3cdc8;
  --ds-color-danger-dark-solid-pressed: #e57c72;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #ebf6fe;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed1;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #13191d;
  --ds-color-info-dark-2: #172128;
  --ds-color-info-dark-3: #152937;
  --ds-color-info-dark-4: #123247;
  --ds-color-info-dark-5: #0c3b56;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089ca;
  --ds-color-info-dark-9: #008ccd;
  --ds-color-info-dark-10: #0099e1;
  --ds-color-info-dark-11: #3cb6fe;
  --ds-color-info-dark-12: #b6daf5;
  --ds-color-info-dark-solid-pressed: #00a4f0;
  --ds-color-neutral-alpha-light-2: rgb(0 55 164 / 0.055);
  --ds-color-neutral-alpha-light-3: rgb(2 46 123 / 0.091);
  --ds-color-neutral-alpha-light-4: rgb(1 40 109 / 0.13);
  --ds-color-neutral-alpha-light-5: rgb(0 37 103 / 0.165);
  --ds-color-neutral-alpha-light-6: rgb(0 30 95 / 0.2);
  --ds-color-neutral-alpha-light-7: rgb(1 34 92 / 0.24);
  --ds-color-neutral-alpha-light-8: rgb(0 16 46 / 0.502);
  --ds-color-neutral-alpha-light-9: rgb(0 16 44 / 0.573);
  --ds-color-neutral-alpha-light-10: rgb(0 13 38 / 0.64);
  --ds-color-neutral-alpha-light-11: rgb(0 10 31 / 0.687);
  --ds-color-neutral-alpha-light-12: rgb(0 2 7 / 0.867);
  --ds-color-neutral-alpha-dark-2: rgb(199 226 255 / 0.039);
  --ds-color-neutral-alpha-dark-3: rgb(189 214 253 / 0.083);
  --ds-color-neutral-alpha-dark-4: rgb(195 219 254 / 0.126);
  --ds-color-neutral-alpha-dark-5: rgb(198 216 255 / 0.169);
  --ds-color-neutral-alpha-dark-6: rgb(198 218 254 / 0.213);
  --ds-color-neutral-alpha-dark-7: rgb(197 217 255 / 0.26);
  --ds-color-neutral-alpha-dark-8: rgb(216 228 255 / 0.516);
  --ds-color-neutral-alpha-dark-9: rgb(211 226 255 / 0.533);
  --ds-color-neutral-alpha-dark-10: rgb(215 229 255 / 0.62);
  --ds-color-neutral-alpha-dark-11: rgb(223 233 255 / 0.706);
  --ds-color-neutral-alpha-dark-12: rgb(247 250 255 / 0.927);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-19: 1.1875rem;
  --ds-font-size-23: 1.4375rem;
  --ds-font-size-28: 1.75rem;
  --ds-font-size-33: 2.0625rem;
  --ds-font-size-40: 2.5rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-32: 32px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 600ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 400;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-19);
  --ds-text-body-lg-line-height: 1.4737;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-19);
  --ds-text-title-md-line-height: 1.4737;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-23);
  --ds-text-title-lg-line-height: 1.3913;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-28);
  --ds-text-headline-sm-line-height: 1.2857;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-33);
  --ds-text-headline-md-line-height: 1.2121;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-33)/calc(1.2121 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-40);
  --ds-text-headline-lg-line-height: 1.2;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.01em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-40)/calc(1.2 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-23);
  --ds-text-numeric-lg-line-height: 1.3913;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-lg);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 1.5px;
  --ds-icon-stroke-lg: 2px;
  --ds-radius-detail: var(--ds-radius-0);
  --ds-radius-control: var(--ds-radius-0);
  --ds-radius-control-sm: var(--ds-radius-0);
  --ds-radius-container: var(--ds-radius-0);
  --ds-radius-overlay: var(--ds-radius-0);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 0px;
  --ds-radius-focus: 0px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-7);
  --ds-color-border-default: var(--ds-color-neutral-light-8);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-5);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(34 36 40 / 0.45);
  --ds-color-shadow-key: rgb(34 36 40 / 0.107);
  --ds-color-shadow-ambient: rgb(34 36 40 / 0.091);
  --ds-color-shadow-ring: rgb(34 36 40 / 0.1);
  --ds-space-inset-xs: var(--ds-space-6);
  --ds-space-inset-sm: var(--ds-space-12);
  --ds-space-inset-md: var(--ds-space-16);
  --ds-space-inset-lg: var(--ds-space-20);
  --ds-space-inset-xl: var(--ds-space-32);
  --ds-space-stack-xs: var(--ds-space-6);
  --ds-space-stack-sm: var(--ds-space-12);
  --ds-space-stack-md: var(--ds-space-16);
  --ds-space-stack-lg: var(--ds-space-20);
  --ds-space-stack-xl: var(--ds-space-32);
  --ds-space-inline-xs: var(--ds-space-6);
  --ds-space-inline-sm: var(--ds-space-12);
  --ds-space-inline-md: var(--ds-space-16);
  --ds-space-section-sm: var(--ds-space-64);
  --ds-space-section-md: var(--ds-space-80);
  --ds-space-section-lg: var(--ds-space-96);
  --ds-size-control-sm: 40px;
  --ds-size-control-md: 48px;
  --ds-size-control-lg: 56px;
  --ds-size-row-sm: 52px;
  --ds-size-row-md: 56px;
  --ds-size-row-lg: 64px;
  --ds-size-row-two-line: 80px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-fernhollow { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-fernhollow { --ds-size-target-min: 44px; } }
.odl-sys-billerwick {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #15803d;
  --ds-color-neutral-light-1: #fdfdfd;
  --ds-color-neutral-light-2: #f4f4f4;
  --ds-color-neutral-light-3: #ebebeb;
  --ds-color-neutral-light-4: #e3e3e3;
  --ds-color-neutral-light-5: #dadada;
  --ds-color-neutral-light-6: #d2d2d2;
  --ds-color-neutral-light-7: #c9c9c9;
  --ds-color-neutral-light-8: #868686;
  --ds-color-neutral-light-9: #757575;
  --ds-color-neutral-light-10: #646464;
  --ds-color-neutral-light-11: #575757;
  --ds-color-neutral-light-12: #242424;
  --ds-color-neutral-dark-1: #151515;
  --ds-color-neutral-dark-2: #1d1d1d;
  --ds-color-neutral-dark-3: #252525;
  --ds-color-neutral-dark-4: #2d2d2d;
  --ds-color-neutral-dark-5: #363636;
  --ds-color-neutral-dark-6: #3f3f3f;
  --ds-color-neutral-dark-7: #484848;
  --ds-color-neutral-dark-8: #808080;
  --ds-color-neutral-dark-9: #828282;
  --ds-color-neutral-dark-10: #959595;
  --ds-color-neutral-dark-11: #ababab;
  --ds-color-neutral-dark-12: #e9e9e9;
  --ds-color-accent-light-1: #fafefb;
  --ds-color-accent-light-2: #eff6f0;
  --ds-color-accent-light-3: #e0efe2;
  --ds-color-accent-light-4: #d1e9d5;
  --ds-color-accent-light-5: #c2e2c7;
  --ds-color-accent-light-6: #b2dcba;
  --ds-color-accent-light-7: #a3d6ac;
  --ds-color-accent-light-8: #519461;
  --ds-color-accent-light-9: #15803d;
  --ds-color-accent-light-10: #097334;
  --ds-color-accent-light-11: #0c652e;
  --ds-color-accent-light-12: #173b21;
  --ds-color-accent-light-solid-pressed: #006b2e;
  --ds-color-accent-dark-1: #141915;
  --ds-color-accent-dark-2: #1a211b;
  --ds-color-accent-dark-3: #1b2b1e;
  --ds-color-accent-dark-4: #1c3422;
  --ds-color-accent-dark-5: #1d3e25;
  --ds-color-accent-dark-6: #1d4828;
  --ds-color-accent-dark-7: #165329;
  --ds-color-accent-dark-8: #409156;
  --ds-color-accent-dark-9: #329551;
  --ds-color-accent-dark-10: #41a25d;
  --ds-color-accent-dark-11: #67be7c;
  --ds-color-accent-dark-12: #c0ddc5;
  --ds-color-accent-dark-solid-pressed: #4cac66;
  --ds-color-success-light-1: #f9fefa;
  --ds-color-success-light-2: #edf6ee;
  --ds-color-success-light-3: #dcf0df;
  --ds-color-success-light-4: #cbebd0;
  --ds-color-success-light-5: #b9e5c1;
  --ds-color-success-light-6: #a7dfb2;
  --ds-color-success-light-7: #95d9a2;
  --ds-color-success-light-8: #379754;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #063d1a;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #141a15;
  --ds-color-success-dark-2: #19211b;
  --ds-color-success-dark-3: #1a2b1d;
  --ds-color-success-dark-4: #1b3521;
  --ds-color-success-dark-5: #1a3e23;
  --ds-color-success-dark-6: #194826;
  --ds-color-success-dark-7: #0f5327;
  --ds-color-success-dark-8: #399252;
  --ds-color-success-dark-9: #28964d;
  --ds-color-success-dark-10: #38a359;
  --ds-color-success-dark-11: #60be78;
  --ds-color-success-dark-12: #beddc3;
  --ds-color-success-dark-solid-pressed: #44ae62;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f4eada;
  --ds-color-warning-light-4: #f1e1c7;
  --ds-color-warning-light-5: #eed8b4;
  --ds-color-warning-light-6: #eacea1;
  --ds-color-warning-light-7: #e6c58d;
  --ds-color-warning-light-8: #a97f30;
  --ds-color-warning-light-9: #eeb23f;
  --ds-color-warning-light-10: #dba437;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #453003;
  --ds-color-warning-light-solid-pressed: #d09929;
  --ds-color-warning-dark-1: #1b1814;
  --ds-color-warning-dark-2: #231f18;
  --ds-color-warning-dark-3: #2f2618;
  --ds-color-warning-dark-4: #3a2d18;
  --ds-color-warning-dark-5: #453517;
  --ds-color-warning-dark-6: #513c15;
  --ds-color-warning-dark-7: #5f430a;
  --ds-color-warning-dark-8: #a27b33;
  --ds-color-warning-dark-9: #e5b561;
  --ds-color-warning-dark-10: #f6c571;
  --ds-color-warning-dark-11: #fdcf82;
  --ds-color-warning-dark-12: #ebdbc1;
  --ds-color-warning-dark-solid-pressed: #ffd387;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fef1f0;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #cd685f;
  --ds-color-danger-light-9: #cd473f;
  --ds-color-danger-light-10: #bc3d37;
  --ds-color-danger-light-11: #9e302b;
  --ds-color-danger-light-12: #57241f;
  --ds-color-danger-light-solid-pressed: #b2342e;
  --ds-color-danger-dark-1: #1d1716;
  --ds-color-danger-dark-2: #281d1c;
  --ds-color-danger-dark-3: #372220;
  --ds-color-danger-dark-4: #452724;
  --ds-color-danger-dark-5: #542c28;
  --ds-color-danger-dark-6: #64312c;
  --ds-color-danger-dark-7: #76342e;
  --ds-color-danger-dark-8: #c4665d;
  --ds-color-danger-dark-9: #cf6359;
  --ds-color-danger-dark-10: #de7065;
  --ds-color-danger-dark-11: #f98f84;
  --ds-color-danger-dark-12: #f5ccc7;
  --ds-color-danger-dark-solid-pressed: #e97a6f;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eaf6ff;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed0;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #12191e;
  --ds-color-info-dark-2: #162129;
  --ds-color-info-dark-3: #122a39;
  --ds-color-info-dark-4: #0c3249;
  --ds-color-info-dark-5: #003b5a;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089c9;
  --ds-color-info-dark-9: #008bcd;
  --ds-color-info-dark-10: #0099e0;
  --ds-color-info-dark-11: #3ab6ff;
  --ds-color-info-dark-12: #b2dbf8;
  --ds-color-info-dark-solid-pressed: #00a3ee;
  --ds-color-neutral-alpha-light-2: rgb(5 5 5 / 0.044);
  --ds-color-neutral-alpha-light-3: rgb(2 2 2 / 0.079);
  --ds-color-neutral-alpha-light-4: rgb(0 0 0 / 0.11);
  --ds-color-neutral-alpha-light-5: rgb(2 2 2 / 0.146);
  --ds-color-neutral-alpha-light-6: rgb(1 1 1 / 0.177);
  --ds-color-neutral-alpha-light-7: rgb(0 0 0 / 0.212);
  --ds-color-neutral-alpha-light-8: rgb(0 0 0 / 0.475);
  --ds-color-neutral-alpha-light-9: rgb(0 0 0 / 0.542);
  --ds-color-neutral-alpha-light-10: rgb(0 0 0 / 0.608);
  --ds-color-neutral-alpha-light-11: rgb(0 0 0 / 0.659);
  --ds-color-neutral-alpha-light-12: rgb(0 0 0 / 0.859);
  --ds-color-neutral-alpha-dark-2: rgb(250 250 250 / 0.035);
  --ds-color-neutral-alpha-dark-3: rgb(253 253 253 / 0.069);
  --ds-color-neutral-alpha-dark-4: rgb(254 254 254 / 0.103);
  --ds-color-neutral-alpha-dark-5: rgb(253 253 253 / 0.142);
  --ds-color-neutral-alpha-dark-6: rgb(254 254 254 / 0.18);
  --ds-color-neutral-alpha-dark-7: rgb(255 255 255 / 0.218);
  --ds-color-neutral-alpha-dark-8: rgb(255 255 255 / 0.458);
  --ds-color-neutral-alpha-dark-9: rgb(255 255 255 / 0.466);
  --ds-color-neutral-alpha-dark-10: rgb(255 255 255 / 0.548);
  --ds-color-neutral-alpha-dark-11: rgb(255 255 255 / 0.642);
  --ds-color-neutral-alpha-dark-12: rgb(255 255 255 / 0.906);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-12: 0.75rem;
  --ds-font-size-14: 0.875rem;
  --ds-font-size-17: 1.0625rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-24: 1.5rem;
  --ds-font-size-29: 1.8125rem;
  --ds-font-size-35: 2.1875rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-16: 16px;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-32: 32px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-44: 44px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 660ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 650;
  --ds-text-body-sm-size: var(--ds-font-size-12);
  --ds-text-body-sm-line-height: 1.3333;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0.02em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-14);
  --ds-text-body-md-line-height: 1.4286;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-17);
  --ds-text-body-lg-line-height: 1.4118;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-17)/calc(1.4118 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-12);
  --ds-text-label-sm-line-height: 1.3333;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-12);
  --ds-text-label-md-line-height: 1.3333;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0.02em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-14);
  --ds-text-label-lg-line-height: 1.4286;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-12);
  --ds-text-code-sm-line-height: 1.3333;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0.02em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-14);
  --ds-text-code-md-line-height: 1.4286;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-14);
  --ds-text-title-sm-line-height: 1.4286;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-17);
  --ds-text-title-md-line-height: 1.4118;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-17)/calc(1.4118 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-20);
  --ds-text-title-lg-line-height: 1.4;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-24);
  --ds-text-headline-sm-line-height: 1.3333;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-24)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-29);
  --ds-text-headline-md-line-height: 1.2414;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: 0em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-29)/calc(1.2414 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-35);
  --ds-text-headline-lg-line-height: 1.2571;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.01em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-35)/calc(1.2571 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-14);
  --ds-text-numeric-md-line-height: 1.4286;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-20);
  --ds-text-numeric-lg-line-height: 1.4;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-sm);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-2);
  --ds-radius-control: var(--ds-radius-6);
  --ds-radius-control-sm: var(--ds-radius-4);
  --ds-radius-container: var(--ds-radius-8);
  --ds-radius-overlay: var(--ds-radius-12);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 2px;
  --ds-radius-focus: 8px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 1px var(--ds-color-shadow-ring);
  --ds-elevation-floating: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-1);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-6);
  --ds-color-border-default: var(--ds-color-neutral-light-7);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-4);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(36 36 36 / 0.45);
  --ds-color-shadow-key: rgb(36 36 36 / 0.107);
  --ds-color-shadow-ambient: rgb(36 36 36 / 0.091);
  --ds-color-shadow-ring: rgb(36 36 36 / 0.1);
  --ds-space-inset-xs: var(--ds-space-2);
  --ds-space-inset-sm: var(--ds-space-6);
  --ds-space-inset-md: var(--ds-space-8);
  --ds-space-inset-lg: var(--ds-space-12);
  --ds-space-inset-xl: var(--ds-space-20);
  --ds-space-stack-xs: var(--ds-space-2);
  --ds-space-stack-sm: var(--ds-space-6);
  --ds-space-stack-md: var(--ds-space-8);
  --ds-space-stack-lg: var(--ds-space-12);
  --ds-space-stack-xl: var(--ds-space-20);
  --ds-space-inline-xs: var(--ds-space-2);
  --ds-space-inline-sm: var(--ds-space-6);
  --ds-space-inline-md: var(--ds-space-8);
  --ds-space-section-sm: var(--ds-space-16);
  --ds-space-section-md: var(--ds-space-24);
  --ds-space-section-lg: var(--ds-space-40);
  --ds-size-control-sm: 24px;
  --ds-size-control-md: 32px;
  --ds-size-control-lg: 40px;
  --ds-size-row-sm: 36px;
  --ds-size-row-md: 40px;
  --ds-size-row-lg: 48px;
  --ds-size-row-two-line: 64px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-billerwick { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-billerwick { --ds-size-target-min: 44px; } }
.odl-sys-swiss {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #d92d20;
  --ds-color-neutral-light-1: #fdfdfd;
  --ds-color-neutral-light-2: #f4f4f4;
  --ds-color-neutral-light-3: #ebebeb;
  --ds-color-neutral-light-4: #e3e3e3;
  --ds-color-neutral-light-5: #dadada;
  --ds-color-neutral-light-6: #d2d2d2;
  --ds-color-neutral-light-7: #c9c9c9;
  --ds-color-neutral-light-8: #868686;
  --ds-color-neutral-light-9: #757575;
  --ds-color-neutral-light-10: #646464;
  --ds-color-neutral-light-11: #575757;
  --ds-color-neutral-light-12: #242424;
  --ds-color-neutral-dark-1: #151515;
  --ds-color-neutral-dark-2: #1d1d1d;
  --ds-color-neutral-dark-3: #252525;
  --ds-color-neutral-dark-4: #2d2d2d;
  --ds-color-neutral-dark-5: #363636;
  --ds-color-neutral-dark-6: #3f3f3f;
  --ds-color-neutral-dark-7: #484848;
  --ds-color-neutral-dark-8: #808080;
  --ds-color-neutral-dark-9: #828282;
  --ds-color-neutral-dark-10: #959595;
  --ds-color-neutral-dark-11: #ababab;
  --ds-color-neutral-dark-12: #e9e9e9;
  --ds-color-accent-light-1: #fffcfc;
  --ds-color-accent-light-2: #fff1ef;
  --ds-color-accent-light-3: #ffe6e2;
  --ds-color-accent-light-4: #ffdbd5;
  --ds-color-accent-light-5: #ffd0c8;
  --ds-color-accent-light-6: #ffc4ba;
  --ds-color-accent-light-7: #ffb8ad;
  --ds-color-accent-light-8: #d86151;
  --ds-color-accent-light-9: #d92d20;
  --ds-color-accent-light-10: #c5271b;
  --ds-color-accent-light-11: #a92016;
  --ds-color-accent-light-12: #5d1f18;
  --ds-color-accent-light-solid-pressed: #bb190f;
  --ds-color-accent-dark-1: #201614;
  --ds-color-accent-dark-2: #2b1c1a;
  --ds-color-accent-dark-3: #3d201b;
  --ds-color-accent-dark-4: #4e231c;
  --ds-color-accent-dark-5: #60251d;
  --ds-color-accent-dark-6: #72271e;
  --ds-color-accent-dark-7: #88231a;
  --ds-color-accent-dark-8: #df5343;
  --ds-color-accent-dark-9: #ee4838;
  --ds-color-accent-dark-10: #fe5746;
  --ds-color-accent-dark-11: #ff8c7b;
  --ds-color-accent-dark-12: #ffc9c0;
  --ds-color-accent-dark-solid-pressed: #ff6c59;
  --ds-color-success-light-1: #f9fef9;
  --ds-color-success-light-2: #ebf7ed;
  --ds-color-success-light-3: #d9f1dd;
  --ds-color-success-light-4: #c6eccc;
  --ds-color-success-light-5: #b2e7bc;
  --ds-color-success-light-6: #9de2ab;
  --ds-color-success-light-7: #87dc9a;
  --ds-color-success-light-8: #089a47;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #003d17;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #131a14;
  --ds-color-success-dark-2: #18221a;
  --ds-color-success-dark-3: #172c1b;
  --ds-color-success-dark-4: #15361d;
  --ds-color-success-dark-5: #11401f;
  --ds-color-success-dark-6: #084a20;
  --ds-color-success-dark-7: #005423;
  --ds-color-success-dark-8: #199547;
  --ds-color-success-dark-9: #009845;
  --ds-color-success-dark-10: #00a74c;
  --ds-color-success-dark-11: #47c26c;
  --ds-color-success-dark-12: #b9dfc0;
  --ds-color-success-dark-solid-pressed: #19b155;
  --ds-color-warning-light-1: #fffcf8;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f5ead9;
  --ds-color-warning-light-4: #f1e1c6;
  --ds-color-warning-light-5: #eed8b3;
  --ds-color-warning-light-6: #ebce9f;
  --ds-color-warning-light-7: #e7c58b;
  --ds-color-warning-light-8: #aa7f2c;
  --ds-color-warning-light-9: #efb239;
  --ds-color-warning-light-10: #dda331;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #463001;
  --ds-color-warning-light-solid-pressed: #d29921;
  --ds-color-warning-dark-1: #1b1813;
  --ds-color-warning-dark-2: #231f18;
  --ds-color-warning-dark-3: #2f2618;
  --ds-color-warning-dark-4: #3a2d17;
  --ds-color-warning-dark-5: #463516;
  --ds-color-warning-dark-6: #523c13;
  --ds-color-warning-dark-7: #5f4306;
  --ds-color-warning-dark-8: #a47b2f;
  --ds-color-warning-dark-9: #e6b55d;
  --ds-color-warning-dark-10: #f7c56e;
  --ds-color-warning-dark-11: #fecf7f;
  --ds-color-warning-dark-12: #ebdbc0;
  --ds-color-warning-dark-solid-pressed: #ffd388;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fff1ef;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #d76258;
  --ds-color-danger-light-9: #d93834;
  --ds-color-danger-light-10: #c72f2c;
  --ds-color-danger-light-11: #a82321;
  --ds-color-danger-light-12: #5c201c;
  --ds-color-danger-light-solid-pressed: #bc2323;
  --ds-color-danger-dark-1: #1e1615;
  --ds-color-danger-dark-2: #291d1b;
  --ds-color-danger-dark-3: #39211f;
  --ds-color-danger-dark-4: #492622;
  --ds-color-danger-dark-5: #582a25;
  --ds-color-danger-dark-6: #692e29;
  --ds-color-danger-dark-7: #7c2f2a;
  --ds-color-danger-dark-8: #cd6057;
  --ds-color-danger-dark-9: #da5b51;
  --ds-color-danger-dark-10: #e9695e;
  --ds-color-danger-dark-11: #ff8c80;
  --ds-color-danger-dark-12: #f9cbc5;
  --ds-color-danger-dark-solid-pressed: #f47367;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eaf6ff;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed0;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #101920;
  --ds-color-info-dark-2: #12212c;
  --ds-color-info-dark-3: #062a40;
  --ds-color-info-dark-4: #00324e;
  --ds-color-info-dark-5: #003b5a;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089c9;
  --ds-color-info-dark-9: #008bcd;
  --ds-color-info-dark-10: #0099e0;
  --ds-color-info-dark-11: #3ab6ff;
  --ds-color-info-dark-12: #abdcff;
  --ds-color-info-dark-solid-pressed: #00a3ee;
  --ds-color-neutral-alpha-light-2: rgb(5 5 5 / 0.044);
  --ds-color-neutral-alpha-light-3: rgb(2 2 2 / 0.079);
  --ds-color-neutral-alpha-light-4: rgb(0 0 0 / 0.11);
  --ds-color-neutral-alpha-light-5: rgb(2 2 2 / 0.146);
  --ds-color-neutral-alpha-light-6: rgb(1 1 1 / 0.177);
  --ds-color-neutral-alpha-light-7: rgb(0 0 0 / 0.212);
  --ds-color-neutral-alpha-light-8: rgb(0 0 0 / 0.475);
  --ds-color-neutral-alpha-light-9: rgb(0 0 0 / 0.542);
  --ds-color-neutral-alpha-light-10: rgb(0 0 0 / 0.608);
  --ds-color-neutral-alpha-light-11: rgb(0 0 0 / 0.659);
  --ds-color-neutral-alpha-light-12: rgb(0 0 0 / 0.859);
  --ds-color-neutral-alpha-dark-2: rgb(250 250 250 / 0.035);
  --ds-color-neutral-alpha-dark-3: rgb(253 253 253 / 0.069);
  --ds-color-neutral-alpha-dark-4: rgb(254 254 254 / 0.103);
  --ds-color-neutral-alpha-dark-5: rgb(253 253 253 / 0.142);
  --ds-color-neutral-alpha-dark-6: rgb(254 254 254 / 0.18);
  --ds-color-neutral-alpha-dark-7: rgb(255 255 255 / 0.218);
  --ds-color-neutral-alpha-dark-8: rgb(255 255 255 / 0.458);
  --ds-color-neutral-alpha-dark-9: rgb(255 255 255 / 0.466);
  --ds-color-neutral-alpha-dark-10: rgb(255 255 255 / 0.548);
  --ds-color-neutral-alpha-dark-11: rgb(255 255 255 / 0.642);
  --ds-color-neutral-alpha-dark-12: rgb(255 255 255 / 0.906);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-25: 1.5625rem;
  --ds-font-size-31: 1.9375rem;
  --ds-font-size-39: 2.4375rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 630ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-20);
  --ds-text-body-lg-line-height: 1.4;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-20);
  --ds-text-title-md-line-height: 1.4;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-25);
  --ds-text-title-lg-line-height: 1.44;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-31);
  --ds-text-headline-sm-line-height: 1.2903;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-31)/calc(1.2903 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-39);
  --ds-text-headline-md-line-height: 1.2308;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-39)/calc(1.2308 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-25);
  --ds-text-numeric-lg-line-height: 1.44;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-0);
  --ds-radius-control: var(--ds-radius-0);
  --ds-radius-control-sm: var(--ds-radius-0);
  --ds-radius-container: var(--ds-radius-0);
  --ds-radius-overlay: var(--ds-radius-0);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 0px;
  --ds-radius-focus: 0px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-overlay: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-6);
  --ds-color-border-default: var(--ds-color-neutral-light-7);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-4);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(36 36 36 / 0.45);
  --ds-color-shadow-key: rgb(36 36 36 / 0);
  --ds-color-shadow-ambient: rgb(36 36 36 / 0);
  --ds-color-shadow-ring: rgb(36 36 36 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-swiss { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-swiss { --ds-size-target-min: 44px; } }
.odl-sys-glass {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #3b6cf6;
  --ds-color-neutral-light-1: #fdfdfd;
  --ds-color-neutral-light-2: #f4f4f4;
  --ds-color-neutral-light-3: #ebebeb;
  --ds-color-neutral-light-4: #e3e3e3;
  --ds-color-neutral-light-5: #dadada;
  --ds-color-neutral-light-6: #d2d2d2;
  --ds-color-neutral-light-7: #c9c9c9;
  --ds-color-neutral-light-8: #868686;
  --ds-color-neutral-light-9: #757575;
  --ds-color-neutral-light-10: #646464;
  --ds-color-neutral-light-11: #575757;
  --ds-color-neutral-light-12: #242424;
  --ds-color-neutral-dark-1: #151515;
  --ds-color-neutral-dark-2: #1d1d1d;
  --ds-color-neutral-dark-3: #252525;
  --ds-color-neutral-dark-4: #2d2d2d;
  --ds-color-neutral-dark-5: #363636;
  --ds-color-neutral-dark-6: #3f3f3f;
  --ds-color-neutral-dark-7: #484848;
  --ds-color-neutral-dark-8: #808080;
  --ds-color-neutral-dark-9: #828282;
  --ds-color-neutral-dark-10: #959595;
  --ds-color-neutral-dark-11: #ababab;
  --ds-color-neutral-dark-12: #e9e9e9;
  --ds-color-accent-light-1: #fcfdff;
  --ds-color-accent-light-2: #eff4ff;
  --ds-color-accent-light-3: #e3ecff;
  --ds-color-accent-light-4: #d6e3ff;
  --ds-color-accent-light-5: #cadbff;
  --ds-color-accent-light-6: #bdd2ff;
  --ds-color-accent-light-7: #b1caff;
  --ds-color-accent-light-8: #5882e8;
  --ds-color-accent-light-9: #3b6cf6;
  --ds-color-accent-light-10: #3360e3;
  --ds-color-accent-light-11: #274ebf;
  --ds-color-accent-light-12: #1c3166;
  --ds-color-accent-light-solid-pressed: #2c57d9;
  --ds-color-accent-dark-1: #141820;
  --ds-color-accent-dark-2: #1a202d;
  --ds-color-accent-dark-3: #1c2740;
  --ds-color-accent-dark-4: #1f2e54;
  --ds-color-accent-dark-5: #213568;
  --ds-color-accent-dark-6: #233c7d;
  --ds-color-accent-dark-7: #234297;
  --ds-color-accent-dark-8: #4c7bf3;
  --ds-color-accent-dark-9: #4a7cff;
  --ds-color-accent-dark-10: #5d8cff;
  --ds-color-accent-dark-11: #85abff;
  --ds-color-accent-dark-12: #c3d6ff;
  --ds-color-accent-dark-solid-pressed: #6c97ff;
  --ds-color-success-light-1: #f9fef9;
  --ds-color-success-light-2: #ebf7ed;
  --ds-color-success-light-3: #d9f1dd;
  --ds-color-success-light-4: #c6eccc;
  --ds-color-success-light-5: #b2e7bc;
  --ds-color-success-light-6: #9de2ab;
  --ds-color-success-light-7: #87dc9a;
  --ds-color-success-light-8: #089a47;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #003d17;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #131a14;
  --ds-color-success-dark-2: #18221a;
  --ds-color-success-dark-3: #172c1b;
  --ds-color-success-dark-4: #15361d;
  --ds-color-success-dark-5: #11401f;
  --ds-color-success-dark-6: #084a20;
  --ds-color-success-dark-7: #005423;
  --ds-color-success-dark-8: #199547;
  --ds-color-success-dark-9: #009845;
  --ds-color-success-dark-10: #00a74c;
  --ds-color-success-dark-11: #47c26c;
  --ds-color-success-dark-12: #b9dfc0;
  --ds-color-success-dark-solid-pressed: #19b155;
  --ds-color-warning-light-1: #fffcf8;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f5ead9;
  --ds-color-warning-light-4: #f1e1c6;
  --ds-color-warning-light-5: #eed8b3;
  --ds-color-warning-light-6: #ebce9f;
  --ds-color-warning-light-7: #e7c58b;
  --ds-color-warning-light-8: #aa7f2c;
  --ds-color-warning-light-9: #efb239;
  --ds-color-warning-light-10: #dda331;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #463001;
  --ds-color-warning-light-solid-pressed: #d29921;
  --ds-color-warning-dark-1: #1b1813;
  --ds-color-warning-dark-2: #231f18;
  --ds-color-warning-dark-3: #2f2618;
  --ds-color-warning-dark-4: #3a2d17;
  --ds-color-warning-dark-5: #463516;
  --ds-color-warning-dark-6: #523c13;
  --ds-color-warning-dark-7: #5f4306;
  --ds-color-warning-dark-8: #a47b2f;
  --ds-color-warning-dark-9: #e6b55d;
  --ds-color-warning-dark-10: #f7c56e;
  --ds-color-warning-dark-11: #fecf7f;
  --ds-color-warning-dark-12: #ebdbc0;
  --ds-color-warning-dark-solid-pressed: #ffd388;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fff1ef;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #d76258;
  --ds-color-danger-light-9: #d93834;
  --ds-color-danger-light-10: #c72f2c;
  --ds-color-danger-light-11: #a82321;
  --ds-color-danger-light-12: #5c201c;
  --ds-color-danger-light-solid-pressed: #bc2323;
  --ds-color-danger-dark-1: #1e1615;
  --ds-color-danger-dark-2: #291d1b;
  --ds-color-danger-dark-3: #39211f;
  --ds-color-danger-dark-4: #492622;
  --ds-color-danger-dark-5: #582a25;
  --ds-color-danger-dark-6: #692e29;
  --ds-color-danger-dark-7: #7c2f2a;
  --ds-color-danger-dark-8: #cd6057;
  --ds-color-danger-dark-9: #da5b51;
  --ds-color-danger-dark-10: #e9695e;
  --ds-color-danger-dark-11: #ff8c80;
  --ds-color-danger-dark-12: #f9cbc5;
  --ds-color-danger-dark-solid-pressed: #f47367;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eaf6ff;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed0;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #101920;
  --ds-color-info-dark-2: #12212c;
  --ds-color-info-dark-3: #062a40;
  --ds-color-info-dark-4: #00324e;
  --ds-color-info-dark-5: #003b5a;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089c9;
  --ds-color-info-dark-9: #008bcd;
  --ds-color-info-dark-10: #0099e0;
  --ds-color-info-dark-11: #3ab6ff;
  --ds-color-info-dark-12: #abdcff;
  --ds-color-info-dark-solid-pressed: #00a3ee;
  --ds-color-neutral-alpha-light-2: rgb(5 5 5 / 0.044);
  --ds-color-neutral-alpha-light-3: rgb(2 2 2 / 0.079);
  --ds-color-neutral-alpha-light-4: rgb(0 0 0 / 0.11);
  --ds-color-neutral-alpha-light-5: rgb(2 2 2 / 0.146);
  --ds-color-neutral-alpha-light-6: rgb(1 1 1 / 0.177);
  --ds-color-neutral-alpha-light-7: rgb(0 0 0 / 0.212);
  --ds-color-neutral-alpha-light-8: rgb(0 0 0 / 0.475);
  --ds-color-neutral-alpha-light-9: rgb(0 0 0 / 0.542);
  --ds-color-neutral-alpha-light-10: rgb(0 0 0 / 0.608);
  --ds-color-neutral-alpha-light-11: rgb(0 0 0 / 0.659);
  --ds-color-neutral-alpha-light-12: rgb(0 0 0 / 0.859);
  --ds-color-neutral-alpha-dark-2: rgb(250 250 250 / 0.035);
  --ds-color-neutral-alpha-dark-3: rgb(253 253 253 / 0.069);
  --ds-color-neutral-alpha-dark-4: rgb(254 254 254 / 0.103);
  --ds-color-neutral-alpha-dark-5: rgb(253 253 253 / 0.142);
  --ds-color-neutral-alpha-dark-6: rgb(254 254 254 / 0.18);
  --ds-color-neutral-alpha-dark-7: rgb(255 255 255 / 0.218);
  --ds-color-neutral-alpha-dark-8: rgb(255 255 255 / 0.458);
  --ds-color-neutral-alpha-dark-9: rgb(255 255 255 / 0.466);
  --ds-color-neutral-alpha-dark-10: rgb(255 255 255 / 0.548);
  --ds-color-neutral-alpha-dark-11: rgb(255 255 255 / 0.642);
  --ds-color-neutral-alpha-dark-12: rgb(255 255 255 / 0.906);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-19: 1.1875rem;
  --ds-font-size-23: 1.4375rem;
  --ds-font-size-28: 1.75rem;
  --ds-font-size-33: 2.0625rem;
  --ds-font-size-40: 2.5rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-32: 32px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-elevation-shadow-1: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 1px 2px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-2: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 2px 4px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-3: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 4px 8px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-4: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 8px 16px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-5: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 14px 28px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-6: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 32px 64px 0px var(--ds-color-shadow-key);
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 670ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 400;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-19);
  --ds-text-body-lg-line-height: 1.4737;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-19);
  --ds-text-title-md-line-height: 1.4737;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-23);
  --ds-text-title-lg-line-height: 1.3913;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-28);
  --ds-text-headline-sm-line-height: 1.2857;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-33);
  --ds-text-headline-md-line-height: 1.2121;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-33)/calc(1.2121 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-40);
  --ds-text-headline-lg-line-height: 1.2;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.01em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-40)/calc(1.2 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-23);
  --ds-text-numeric-lg-line-height: 1.3913;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 1.5px;
  --ds-icon-stroke-lg: 2px;
  --ds-radius-detail: var(--ds-radius-6);
  --ds-radius-control: var(--ds-radius-12);
  --ds-radius-control-sm: var(--ds-radius-8);
  --ds-radius-container: var(--ds-radius-16);
  --ds-radius-overlay: var(--ds-radius-24);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 2px;
  --ds-radius-focus: 14px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: var(--ds-elevation-shadow-1);
  --ds-elevation-floating: var(--ds-elevation-shadow-3);
  --ds-elevation-overlay: var(--ds-elevation-shadow-5);
  --ds-material-glass-blur: 24px;
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-1);
  --ds-color-surface-glass: rgb(255 255 255 / 0.72);
  --ds-color-surface-glass-fallback: var(--ds-color-white);
  --ds-color-surface-glass-dimming: rgb(0 0 0 / 0.35);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-6);
  --ds-color-border-default: var(--ds-color-neutral-light-7);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-4);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(36 36 36 / 0.45);
  --ds-color-shadow-key: rgb(36 36 36 / 0.221);
  --ds-color-shadow-ambient: rgb(36 36 36 / 0.188);
  --ds-color-shadow-ring: rgb(36 36 36 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-glass { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-glass { --ds-size-target-min: 44px; } }
.odl-sys-playful {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #7c3aed;
  --ds-color-neutral-light-1: #fcfdfd;
  --ds-color-neutral-light-2: #f3f4f5;
  --ds-color-neutral-light-3: #ebebed;
  --ds-color-neutral-light-4: #e2e3e5;
  --ds-color-neutral-light-5: #d9dadc;
  --ds-color-neutral-light-6: #d1d2d4;
  --ds-color-neutral-light-7: #c8c9cc;
  --ds-color-neutral-light-8: #858689;
  --ds-color-neutral-light-9: #747579;
  --ds-color-neutral-light-10: #636468;
  --ds-color-neutral-light-11: #56575a;
  --ds-color-neutral-light-12: #232426;
  --ds-color-neutral-dark-1: #151516;
  --ds-color-neutral-dark-2: #1c1d1e;
  --ds-color-neutral-dark-3: #252526;
  --ds-color-neutral-dark-4: #2d2e2f;
  --ds-color-neutral-dark-5: #353638;
  --ds-color-neutral-dark-6: #3e3f41;
  --ds-color-neutral-dark-7: #47484b;
  --ds-color-neutral-dark-8: #7f8083;
  --ds-color-neutral-dark-9: #818286;
  --ds-color-neutral-dark-10: #949699;
  --ds-color-neutral-dark-11: #a9abae;
  --ds-color-neutral-dark-12: #e8e9eb;
  --ds-color-accent-light-1: #fdfcff;
  --ds-color-accent-light-2: #f5f3ff;
  --ds-color-accent-light-3: #ece9ff;
  --ds-color-accent-light-4: #e4dfff;
  --ds-color-accent-light-5: #ddd5ff;
  --ds-color-accent-light-6: #d5ccff;
  --ds-color-accent-light-7: #cdc2ff;
  --ds-color-accent-light-8: #926fef;
  --ds-color-accent-light-9: #7c3aed;
  --ds-color-accent-light-10: #7030d9;
  --ds-color-accent-light-11: #6835c6;
  --ds-color-accent-light-12: #3b2769;
  --ds-color-accent-light-solid-pressed: #6824cf;
  --ds-color-accent-dark-1: #191721;
  --ds-color-accent-dark-2: #211e2e;
  --ds-color-accent-dark-3: #2a2342;
  --ds-color-accent-dark-4: #342857;
  --ds-color-accent-dark-5: #3e2c6c;
  --ds-color-accent-dark-6: #493082;
  --ds-color-accent-dark-7: #54319d;
  --ds-color-accent-dark-8: #9264fb;
  --ds-color-accent-dark-9: #9466ff;
  --ds-color-accent-dark-10: #9d79ff;
  --ds-color-accent-dark-11: #b49fff;
  --ds-color-accent-dark-12: #d8d0ff;
  --ds-color-accent-dark-solid-pressed: #a587ff;
  --ds-color-accent2-light-1: #fffcfd;
  --ds-color-accent2-light-2: #fbf2f5;
  --ds-color-accent2-light-3: #fae7ee;
  --ds-color-accent2-light-4: #fadbe7;
  --ds-color-accent2-light-5: #f9cfdf;
  --ds-color-accent2-light-6: #f8c4d8;
  --ds-color-accent2-light-7: #f7b8d1;
  --ds-color-accent2-light-8: #ba6f90;
  --ds-color-accent2-light-9: #b65482;
  --ds-color-accent2-light-10: #a64a75;
  --ds-color-accent2-light-11: #8b3b61;
  --ds-color-accent2-light-12: #4e2839;
  --ds-color-accent2-light-solid-pressed: #9d426d;
  --ds-color-accent2-dark-1: #1c1719;
  --ds-color-accent2-dark-2: #261e21;
  --ds-color-accent2-dark-3: #332329;
  --ds-color-accent2-dark-4: #402932;
  --ds-color-accent2-dark-5: #4d2f3b;
  --ds-color-accent2-dark-6: #5a3445;
  --ds-color-accent2-dark-7: #6a394e;
  --ds-color-accent2-dark-8: #b36d8b;
  --ds-color-accent2-dark-9: #bd6b8f;
  --ds-color-accent2-dark-10: #cb789c;
  --ds-color-accent2-dark-11: #e494b6;
  --ds-color-accent2-dark-12: #ecced9;
  --ds-color-accent2-dark-solid-pressed: #d682a6;
  --ds-color-accent3-light-1: #fafdff;
  --ds-color-accent3-light-2: #edf5fa;
  --ds-color-accent3-light-3: #dceef9;
  --ds-color-accent3-light-4: #cae7f8;
  --ds-color-accent3-light-5: #b7e0f7;
  --ds-color-accent3-light-6: #a5d9f6;
  --ds-color-accent3-light-7: #91d2f5;
  --ds-color-accent3-light-8: #318fbb;
  --ds-color-accent3-light-9: #007eac;
  --ds-color-accent3-light-10: #00729c;
  --ds-color-accent3-light-11: #005e82;
  --ds-color-accent3-light-12: #02384f;
  --ds-color-accent3-light-solid-pressed: #006990;
  --ds-color-accent3-dark-1: #14191c;
  --ds-color-accent3-dark-2: #192125;
  --ds-color-accent3-dark-3: #192932;
  --ds-color-accent3-dark-4: #19323f;
  --ds-color-accent3-dark-5: #193b4c;
  --ds-color-accent3-dark-6: #16445a;
  --ds-color-accent3-dark-7: #094e6a;
  --ds-color-accent3-dark-8: #348ab3;
  --ds-color-accent3-dark-9: #1f8dbd;
  --ds-color-accent3-dark-10: #329acb;
  --ds-color-accent3-dark-11: #5bb6e3;
  --ds-color-accent3-dark-12: #bddaeb;
  --ds-color-accent3-dark-solid-pressed: #3ea4d5;
  --ds-color-success-light-1: #f9fef9;
  --ds-color-success-light-2: #ebf7ed;
  --ds-color-success-light-3: #d9f1dd;
  --ds-color-success-light-4: #c6eccc;
  --ds-color-success-light-5: #b2e7bc;
  --ds-color-success-light-6: #9de2ab;
  --ds-color-success-light-7: #87dc9a;
  --ds-color-success-light-8: #089a47;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #003d17;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #131a15;
  --ds-color-success-dark-2: #18221a;
  --ds-color-success-dark-3: #172c1b;
  --ds-color-success-dark-4: #15361d;
  --ds-color-success-dark-5: #11401f;
  --ds-color-success-dark-6: #084a20;
  --ds-color-success-dark-7: #005423;
  --ds-color-success-dark-8: #199547;
  --ds-color-success-dark-9: #009845;
  --ds-color-success-dark-10: #00a74c;
  --ds-color-success-dark-11: #47c26c;
  --ds-color-success-dark-12: #b9dfc0;
  --ds-color-success-dark-solid-pressed: #19b155;
  --ds-color-warning-light-1: #fffcf8;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f5ead9;
  --ds-color-warning-light-4: #f1e1c6;
  --ds-color-warning-light-5: #eed8b3;
  --ds-color-warning-light-6: #ebce9f;
  --ds-color-warning-light-7: #e7c58b;
  --ds-color-warning-light-8: #aa7f2c;
  --ds-color-warning-light-9: #efb239;
  --ds-color-warning-light-10: #dda331;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #463001;
  --ds-color-warning-light-solid-pressed: #d29921;
  --ds-color-warning-dark-1: #1b1813;
  --ds-color-warning-dark-2: #231f18;
  --ds-color-warning-dark-3: #2f2618;
  --ds-color-warning-dark-4: #3a2d17;
  --ds-color-warning-dark-5: #463516;
  --ds-color-warning-dark-6: #523c13;
  --ds-color-warning-dark-7: #5f4306;
  --ds-color-warning-dark-8: #a47b2f;
  --ds-color-warning-dark-9: #e6b55d;
  --ds-color-warning-dark-10: #f7c56e;
  --ds-color-warning-dark-11: #fecf7f;
  --ds-color-warning-dark-12: #ebdbc0;
  --ds-color-warning-dark-solid-pressed: #ffd388;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fff1ef;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #d76258;
  --ds-color-danger-light-9: #d93834;
  --ds-color-danger-light-10: #c72f2c;
  --ds-color-danger-light-11: #a82321;
  --ds-color-danger-light-12: #5c201c;
  --ds-color-danger-light-solid-pressed: #bc2323;
  --ds-color-danger-dark-1: #1e1615;
  --ds-color-danger-dark-2: #291d1c;
  --ds-color-danger-dark-3: #39211f;
  --ds-color-danger-dark-4: #492622;
  --ds-color-danger-dark-5: #592a26;
  --ds-color-danger-dark-6: #692e29;
  --ds-color-danger-dark-7: #7c2f2a;
  --ds-color-danger-dark-8: #ce6157;
  --ds-color-danger-dark-9: #db5c52;
  --ds-color-danger-dark-10: #ea6a5f;
  --ds-color-danger-dark-11: #ff8c80;
  --ds-color-danger-dark-12: #f9cbc5;
  --ds-color-danger-dark-solid-pressed: #f57468;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eaf6ff;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed0;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #101920;
  --ds-color-info-dark-2: #12212c;
  --ds-color-info-dark-3: #062a40;
  --ds-color-info-dark-4: #00334e;
  --ds-color-info-dark-5: #003b5a;
  --ds-color-info-dark-6: #004467;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0089c9;
  --ds-color-info-dark-9: #008bcd;
  --ds-color-info-dark-10: #0099e0;
  --ds-color-info-dark-11: #3ab6ff;
  --ds-color-info-dark-12: #abdcff;
  --ds-color-info-dark-solid-pressed: #00a3ee;
  --ds-color-neutral-alpha-light-2: rgb(5 26 47 / 0.048);
  --ds-color-neutral-alpha-light-3: rgb(2 2 27 / 0.079);
  --ds-color-neutral-alpha-light-4: rgb(1 9 27 / 0.114);
  --ds-color-neutral-alpha-light-5: rgb(2 8 22 / 0.15);
  --ds-color-neutral-alpha-light-6: rgb(1 6 17 / 0.181);
  --ds-color-neutral-alpha-light-7: rgb(0 5 19 / 0.216);
  --ds-color-neutral-alpha-light-8: rgb(0 2 9 / 0.479);
  --ds-color-neutral-alpha-light-9: rgb(0 2 10 / 0.546);
  --ds-color-neutral-alpha-light-10: rgb(0 2 8 / 0.612);
  --ds-color-neutral-alpha-light-11: rgb(0 2 6 / 0.663);
  --ds-color-neutral-alpha-light-12: rgb(0 1 4 / 0.863);
  --ds-color-neutral-alpha-dark-2: rgb(221 250 251 / 0.035);
  --ds-color-neutral-alpha-dark-3: rgb(253 253 254 / 0.069);
  --ds-color-neutral-alpha-dark-4: rgb(243 252 253 / 0.108);
  --ds-color-neutral-alpha-dark-5: rgb(240 247 255 / 0.146);
  --ds-color-neutral-alpha-dark-6: rgb(243 248 254 / 0.185);
  --ds-color-neutral-alpha-dark-7: rgb(240 245 254 / 0.228);
  --ds-color-neutral-alpha-dark-8: rgb(247 250 255 / 0.468);
  --ds-color-neutral-alpha-dark-9: rgb(246 248 255 / 0.481);
  --ds-color-neutral-alpha-dark-10: rgb(247 250 255 / 0.563);
  --ds-color-neutral-alpha-dark-11: rgb(248 251 255 / 0.653);
  --ds-color-neutral-alpha-dark-12: rgb(252 253 255 / 0.915);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-12: 0.75rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-21: 1.3125rem;
  --ds-font-size-28: 1.75rem;
  --ds-font-size-38: 2.375rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-16: 16px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-elevation-shadow-1: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 1px 2px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-2: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 2px 4px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-3: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 4px 8px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-4: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 8px 16px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-5: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 14px 28px 0px var(--ds-color-shadow-key);
  --ds-elevation-shadow-6: 0px 0px 2px 0px var(--ds-color-shadow-ambient), 0px 32px 64px 0px var(--ds-color-shadow-key);
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 780ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 750;
  --ds-font-weight-display: 850;
  --ds-text-body-sm-size: var(--ds-font-size-12);
  --ds-text-body-sm-line-height: 1.3333;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0.02em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-21);
  --ds-text-body-lg-line-height: 1.3333;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-21)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-12);
  --ds-text-label-sm-line-height: 1.3333;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-12);
  --ds-text-label-md-line-height: 1.3333;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0.02em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-12);
  --ds-text-code-sm-line-height: 1.3333;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0.02em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-21);
  --ds-text-title-md-line-height: 1.3333;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-21)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-28);
  --ds-text-title-lg-line-height: 1.2857;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-38);
  --ds-text-headline-sm-line-height: 1.2632;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: -0.01em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-38)/calc(1.2632 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-28);
  --ds-text-numeric-lg-line-height: 1.2857;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-sm-size: var(--ds-font-size-12);
  --ds-text-emphasized-body-sm-line-height: 1.3333;
  --ds-text-emphasized-body-sm-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-sm-tracking: 0.02em;
  --ds-text-emphasized-body-sm-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-sm: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-md-size: var(--ds-font-size-16);
  --ds-text-emphasized-body-md-line-height: 1.5;
  --ds-text-emphasized-body-md-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-md-tracking: 0em;
  --ds-text-emphasized-body-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-md: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-lg-size: var(--ds-font-size-21);
  --ds-text-emphasized-body-lg-line-height: 1.3333;
  --ds-text-emphasized-body-lg-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-lg-tracking: 0em;
  --ds-text-emphasized-body-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-lg: var(--ds-font-weight-label) var(--ds-font-size-21)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-label-md-size: var(--ds-font-size-12);
  --ds-text-emphasized-label-md-line-height: 1.3333;
  --ds-text-emphasized-label-md-weight: var(--ds-font-weight-heading);
  --ds-text-emphasized-label-md-tracking: 0.02em;
  --ds-text-emphasized-label-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-label-md: var(--ds-font-weight-heading) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-label-lg-size: var(--ds-font-size-16);
  --ds-text-emphasized-label-lg-line-height: 1.5;
  --ds-text-emphasized-label-lg-weight: var(--ds-font-weight-heading);
  --ds-text-emphasized-label-lg-tracking: 0em;
  --ds-text-emphasized-label-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-label-lg: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-sm-size: var(--ds-font-size-16);
  --ds-text-emphasized-title-sm-line-height: 1.5;
  --ds-text-emphasized-title-sm-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-sm-tracking: 0em;
  --ds-text-emphasized-title-sm-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-sm: var(--ds-font-weight-display) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-md-size: var(--ds-font-size-21);
  --ds-text-emphasized-title-md-line-height: 1.3333;
  --ds-text-emphasized-title-md-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-md-tracking: 0em;
  --ds-text-emphasized-title-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-md: var(--ds-font-weight-display) var(--ds-font-size-21)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-lg-size: var(--ds-font-size-28);
  --ds-text-emphasized-title-lg-line-height: 1.2857;
  --ds-text-emphasized-title-lg-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-lg-tracking: 0em;
  --ds-text-emphasized-title-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-lg: var(--ds-font-weight-display) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-headline-sm-size: var(--ds-font-size-38);
  --ds-text-emphasized-headline-sm-line-height: 1.2632;
  --ds-text-emphasized-headline-sm-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-headline-sm-tracking: -0.01em;
  --ds-text-emphasized-headline-sm-family: var(--ds-font-family-display);
  --ds-text-emphasized-headline-sm: var(--ds-font-weight-display) var(--ds-font-size-38)/calc(1.2632 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-4);
  --ds-radius-control: var(--ds-radius-full);
  --ds-radius-control-sm: var(--ds-radius-full);
  --ds-radius-container: var(--ds-radius-20);
  --ds-radius-overlay: var(--ds-radius-28);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 4px;
  --ds-radius-focus: 9999px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: var(--ds-elevation-shadow-1);
  --ds-elevation-floating: var(--ds-elevation-shadow-3);
  --ds-elevation-overlay: var(--ds-elevation-shadow-5);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-accent-light-9);
  --ds-color-surface-tinted: var(--ds-color-accent-light-3);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-accent2: var(--ds-color-accent2-light-11);
  --ds-color-text-on-accent2: var(--ds-color-white);
  --ds-color-text-accent3: var(--ds-color-accent3-light-11);
  --ds-color-text-on-accent3: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-accent2-subtle: var(--ds-color-accent2-light-3);
  --ds-color-bg-accent2-bold: var(--ds-color-accent2-light-9);
  --ds-color-bg-accent2-bold-hover: var(--ds-color-accent2-light-10);
  --ds-color-bg-accent2-bold-pressed: var(--ds-color-accent2-light-solid-pressed);
  --ds-color-bg-accent3-subtle: var(--ds-color-accent3-light-3);
  --ds-color-bg-accent3-bold: var(--ds-color-accent3-light-9);
  --ds-color-bg-accent3-bold-hover: var(--ds-color-accent3-light-10);
  --ds-color-bg-accent3-bold-pressed: var(--ds-color-accent3-light-solid-pressed);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-6);
  --ds-color-border-default: var(--ds-color-neutral-light-7);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-4);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(35 36 38 / 0.45);
  --ds-color-shadow-key: rgb(35 36 38 / 0.173);
  --ds-color-shadow-ambient: rgb(35 36 38 / 0.147);
  --ds-color-shadow-ring: rgb(35 36 38 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-playful { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-playful { --ds-size-target-min: 44px; } }
.odl-sys-mono {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #18181b;
  --ds-color-neutral-light-1: #fdfdfd;
  --ds-color-neutral-light-2: #f4f4f4;
  --ds-color-neutral-light-3: #ebebeb;
  --ds-color-neutral-light-4: #e3e3e3;
  --ds-color-neutral-light-5: #dadada;
  --ds-color-neutral-light-6: #d2d2d2;
  --ds-color-neutral-light-7: #c9c9c9;
  --ds-color-neutral-light-8: #868686;
  --ds-color-neutral-light-9: #757575;
  --ds-color-neutral-light-10: #646464;
  --ds-color-neutral-light-11: #575757;
  --ds-color-neutral-light-12: #242424;
  --ds-color-neutral-dark-1: #151515;
  --ds-color-neutral-dark-2: #1d1d1d;
  --ds-color-neutral-dark-3: #252525;
  --ds-color-neutral-dark-4: #2d2d2d;
  --ds-color-neutral-dark-5: #363636;
  --ds-color-neutral-dark-6: #3f3f3f;
  --ds-color-neutral-dark-7: #484848;
  --ds-color-neutral-dark-8: #808080;
  --ds-color-neutral-dark-9: #828282;
  --ds-color-neutral-dark-10: #959595;
  --ds-color-neutral-dark-11: #ababab;
  --ds-color-neutral-dark-12: #e9e9e9;
  --ds-color-accent-light-1: #fdfdfe;
  --ds-color-accent-light-2: #f4f4f7;
  --ds-color-accent-light-3: #ebebf1;
  --ds-color-accent-light-4: #e2e2ec;
  --ds-color-accent-light-5: #d9d9e7;
  --ds-color-accent-light-6: #d0d0e2;
  --ds-color-accent-light-7: #c8c8dd;
  --ds-color-accent-light-8: #84849e;
  --ds-color-accent-light-9: #18181b;
  --ds-color-accent-light-10: #000001;
  --ds-color-accent-light-11: #000000;
  --ds-color-accent-light-12: #000000;
  --ds-color-accent-light-solid-pressed: #2f2d48;
  --ds-color-accent-dark-1: #18181a;
  --ds-color-accent-dark-2: #1f1f23;
  --ds-color-accent-dark-3: #27272d;
  --ds-color-accent-dark-4: #2f2e38;
  --ds-color-accent-dark-5: #363643;
  --ds-color-accent-dark-6: #3f3e4e;
  --ds-color-accent-dark-7: #47465b;
  --ds-color-accent-dark-8: #7f7f9c;
  --ds-color-accent-dark-9: #8281a3;
  --ds-color-accent-dark-10: #8f8eb1;
  --ds-color-accent-dark-11: #a9a9ca;
  --ds-color-accent-dark-12: #d5d5e1;
  --ds-color-accent-dark-solid-pressed: #9898bb;
  --ds-color-success-light-1: #fafefb;
  --ds-color-success-light-2: #eff5f0;
  --ds-color-success-light-3: #e1efe3;
  --ds-color-success-light-4: #d3e8d6;
  --ds-color-success-light-5: #c4e2c9;
  --ds-color-success-light-6: #b6dbbc;
  --ds-color-success-light-7: #a7d4af;
  --ds-color-success-light-8: #599365;
  --ds-color-success-light-9: #318549;
  --ds-color-success-light-10: #297840;
  --ds-color-success-light-11: #1d6333;
  --ds-color-success-light-12: #1c3a23;
  --ds-color-success-light-solid-pressed: #1e7039;
  --ds-color-success-dark-1: #161916;
  --ds-color-success-dark-2: #1b211c;
  --ds-color-success-dark-3: #1f2a21;
  --ds-color-success-dark-4: #223325;
  --ds-color-success-dark-5: #263c2a;
  --ds-color-success-dark-6: #29462f;
  --ds-color-success-dark-7: #2a5033;
  --ds-color-success-dark-8: #578d63;
  --ds-color-success-dark-9: #519160;
  --ds-color-success-dark-10: #5e9e6c;
  --ds-color-success-dark-11: #7eba8a;
  --ds-color-success-dark-12: #c6dbc9;
  --ds-color-success-dark-solid-pressed: #68a876;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ed;
  --ds-color-warning-light-3: #f3eadd;
  --ds-color-warning-light-4: #efe1cb;
  --ds-color-warning-light-5: #ebd8ba;
  --ds-color-warning-light-6: #e6cfa8;
  --ds-color-warning-light-7: #e2c697;
  --ds-color-warning-light-8: #a48042;
  --ds-color-warning-light-9: #e7b55b;
  --ds-color-warning-light-10: #d5a652;
  --ds-color-warning-light-11: #845d03;
  --ds-color-warning-light-12: #43310f;
  --ds-color-warning-light-solid-pressed: #ca9c47;
  --ds-color-warning-dark-1: #1a1814;
  --ds-color-warning-dark-2: #231f19;
  --ds-color-warning-dark-3: #2d261b;
  --ds-color-warning-dark-4: #382e1c;
  --ds-color-warning-dark-5: #43351d;
  --ds-color-warning-dark-6: #4f3d1e;
  --ds-color-warning-dark-7: #5c441a;
  --ds-color-warning-dark-8: #9d7c42;
  --ds-color-warning-dark-9: #dfb772;
  --ds-color-warning-dark-10: #f0c781;
  --ds-color-warning-dark-11: #f8d191;
  --ds-color-warning-dark-12: #e9dcc6;
  --ds-color-warning-dark-solid-pressed: #fdd48e;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fbf2f1;
  --ds-color-danger-light-3: #fbe7e5;
  --ds-color-danger-light-4: #fbdcd8;
  --ds-color-danger-light-5: #fad1cc;
  --ds-color-danger-light-6: #f9c6bf;
  --ds-color-danger-light-7: #f8bbb3;
  --ds-color-danger-light-8: #bc726a;
  --ds-color-danger-light-9: #b95850;
  --ds-color-danger-light-10: #a84e46;
  --ds-color-danger-light-11: #8d4039;
  --ds-color-danger-light-12: #4f2925;
  --ds-color-danger-light-solid-pressed: #9f463e;
  --ds-color-danger-dark-1: #1c1716;
  --ds-color-danger-dark-2: #261e1d;
  --ds-color-danger-dark-3: #332422;
  --ds-color-danger-dark-4: #402a27;
  --ds-color-danger-dark-5: #4d302c;
  --ds-color-danger-dark-6: #5b3632;
  --ds-color-danger-dark-7: #6b3b36;
  --ds-color-danger-dark-8: #b46f67;
  --ds-color-danger-dark-9: #bd6e65;
  --ds-color-danger-dark-10: #cc7b72;
  --ds-color-danger-dark-11: #e6988f;
  --ds-color-danger-dark-12: #edcfcb;
  --ds-color-danger-dark-solid-pressed: #d6847b;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eef5fa;
  --ds-color-info-light-3: #dfedf8;
  --ds-color-info-light-4: #cfe6f7;
  --ds-color-info-light-5: #bfdff6;
  --ds-color-info-light-6: #aed7f5;
  --ds-color-info-light-7: #9ed0f3;
  --ds-color-info-light-8: #4a8cb8;
  --ds-color-info-light-9: #057cb6;
  --ds-color-info-light-10: #0070a5;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #13374d;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #15191c;
  --ds-color-info-dark-2: #1a2025;
  --ds-color-info-dark-3: #1c2932;
  --ds-color-info-dark-4: #1f313e;
  --ds-color-info-dark-5: #213a4c;
  --ds-color-info-dark-6: #224359;
  --ds-color-info-dark-7: #1f4c69;
  --ds-color-info-dark-8: #4a88b1;
  --ds-color-info-dark-9: #418bbb;
  --ds-color-info-dark-10: #4f98c9;
  --ds-color-info-dark-11: #70b3e1;
  --ds-color-info-dark-12: #c2d9ea;
  --ds-color-info-dark-solid-pressed: #59a2d3;
  --ds-color-neutral-alpha-light-2: rgb(5 5 5 / 0.044);
  --ds-color-neutral-alpha-light-3: rgb(2 2 2 / 0.079);
  --ds-color-neutral-alpha-light-4: rgb(0 0 0 / 0.11);
  --ds-color-neutral-alpha-light-5: rgb(2 2 2 / 0.146);
  --ds-color-neutral-alpha-light-6: rgb(1 1 1 / 0.177);
  --ds-color-neutral-alpha-light-7: rgb(0 0 0 / 0.212);
  --ds-color-neutral-alpha-light-8: rgb(0 0 0 / 0.475);
  --ds-color-neutral-alpha-light-9: rgb(0 0 0 / 0.542);
  --ds-color-neutral-alpha-light-10: rgb(0 0 0 / 0.608);
  --ds-color-neutral-alpha-light-11: rgb(0 0 0 / 0.659);
  --ds-color-neutral-alpha-light-12: rgb(0 0 0 / 0.859);
  --ds-color-neutral-alpha-dark-2: rgb(250 250 250 / 0.035);
  --ds-color-neutral-alpha-dark-3: rgb(253 253 253 / 0.069);
  --ds-color-neutral-alpha-dark-4: rgb(254 254 254 / 0.103);
  --ds-color-neutral-alpha-dark-5: rgb(253 253 253 / 0.142);
  --ds-color-neutral-alpha-dark-6: rgb(254 254 254 / 0.18);
  --ds-color-neutral-alpha-dark-7: rgb(255 255 255 / 0.218);
  --ds-color-neutral-alpha-dark-8: rgb(255 255 255 / 0.458);
  --ds-color-neutral-alpha-dark-9: rgb(255 255 255 / 0.466);
  --ds-color-neutral-alpha-dark-10: rgb(255 255 255 / 0.548);
  --ds-color-neutral-alpha-dark-11: rgb(255 255 255 / 0.642);
  --ds-color-neutral-alpha-dark-12: rgb(255 255 255 / 0.906);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-19: 1.1875rem;
  --ds-font-size-23: 1.4375rem;
  --ds-font-size-28: 1.75rem;
  --ds-font-size-33: 2.0625rem;
  --ds-font-size-40: 2.5rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-32: 32px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 620ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 400;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-19);
  --ds-text-body-lg-line-height: 1.4737;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-19);
  --ds-text-title-md-line-height: 1.4737;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-19)/calc(1.4737 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-23);
  --ds-text-title-lg-line-height: 1.3913;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-28);
  --ds-text-headline-sm-line-height: 1.2857;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-28)/calc(1.2857 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-33);
  --ds-text-headline-md-line-height: 1.2121;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-33)/calc(1.2121 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-40);
  --ds-text-headline-lg-line-height: 1.2;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.01em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-40)/calc(1.2 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-23);
  --ds-text-numeric-lg-line-height: 1.3913;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-23)/calc(1.3913 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 1.5px;
  --ds-icon-stroke-lg: 2px;
  --ds-radius-detail: var(--ds-radius-2);
  --ds-radius-control: var(--ds-radius-2);
  --ds-radius-control-sm: var(--ds-radius-0);
  --ds-radius-container: var(--ds-radius-8);
  --ds-radius-overlay: var(--ds-radius-12);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 2px;
  --ds-radius-focus: 4px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 0px 0px 1px var(--ds-color-shadow-ring), 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-6);
  --ds-color-border-default: var(--ds-color-neutral-light-7);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-4);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(36 36 36 / 0.45);
  --ds-color-shadow-key: rgb(36 36 36 / 0.088);
  --ds-color-shadow-ambient: rgb(36 36 36 / 0.075);
  --ds-color-shadow-ring: rgb(36 36 36 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-mono { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-mono { --ds-size-target-min: 44px; } }
.odl-sys-terminal {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #0e7c66;
  --ds-color-neutral-light-1: #fcfdff;
  --ds-color-neutral-light-2: #f2f4f9;
  --ds-color-neutral-light-3: #e8ecf1;
  --ds-color-neutral-light-4: #dfe3ea;
  --ds-color-neutral-light-5: #d6dbe3;
  --ds-color-neutral-light-6: #cdd2dc;
  --ds-color-neutral-light-7: #c4cad5;
  --ds-color-neutral-light-8: #808793;
  --ds-color-neutral-light-9: #6f7683;
  --ds-color-neutral-light-10: #5e6471;
  --ds-color-neutral-light-11: #515762;
  --ds-color-neutral-light-12: #222428;
  --ds-color-neutral-dark-1: #141517;
  --ds-color-neutral-dark-2: #1b1d20;
  --ds-color-neutral-dark-3: #232529;
  --ds-color-neutral-dark-4: #2b2e33;
  --ds-color-neutral-dark-5: #33363d;
  --ds-color-neutral-dark-6: #3b3f47;
  --ds-color-neutral-dark-7: #434852;
  --ds-color-neutral-dark-8: #7a808c;
  --ds-color-neutral-dark-9: #7c8290;
  --ds-color-neutral-dark-10: #8f96a4;
  --ds-color-neutral-dark-11: #a5abb8;
  --ds-color-neutral-dark-12: #e6e9ee;
  --ds-color-accent-light-1: #fafdfc;
  --ds-color-accent-light-2: #eff5f3;
  --ds-color-accent-light-3: #e0eeea;
  --ds-color-accent-light-4: #d1e8e0;
  --ds-color-accent-light-5: #c2e1d7;
  --ds-color-accent-light-6: #b2dace;
  --ds-color-accent-light-7: #a3d4c5;
  --ds-color-accent-light-8: #519280;
  --ds-color-accent-light-9: #0e7c66;
  --ds-color-accent-light-10: #03705b;
  --ds-color-accent-light-11: #0b6351;
  --ds-color-accent-light-12: #173a31;
  --ds-color-accent-light-solid-pressed: #006754;
  --ds-color-accent-dark-1: #141918;
  --ds-color-accent-dark-2: #1a211f;
  --ds-color-accent-dark-3: #1b2a26;
  --ds-color-accent-dark-4: #1c332d;
  --ds-color-accent-dark-5: #1d3d34;
  --ds-color-accent-dark-6: #1c473c;
  --ds-color-accent-dark-7: #165143;
  --ds-color-accent-dark-8: #408f7b;
  --ds-color-accent-dark-9: #32937c;
  --ds-color-accent-dark-10: #42a089;
  --ds-color-accent-dark-11: #67bba4;
  --ds-color-accent-dark-12: #c0dcd3;
  --ds-color-accent-dark-solid-pressed: #4daa92;
  --ds-color-success-light-1: #fafefa;
  --ds-color-success-light-2: #eef6ef;
  --ds-color-success-light-3: #dfefe2;
  --ds-color-success-light-4: #d0e9d4;
  --ds-color-success-light-5: #c0e3c6;
  --ds-color-success-light-6: #b1ddb8;
  --ds-color-success-light-7: #a1d6ab;
  --ds-color-success-light-8: #4e945f;
  --ds-color-success-light-9: #148740;
  --ds-color-success-light-10: #097a38;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #163b20;
  --ds-color-success-light-solid-pressed: #007131;
  --ds-color-success-dark-1: #151916;
  --ds-color-success-dark-2: #1a211c;
  --ds-color-success-dark-3: #1d2a1f;
  --ds-color-success-dark-4: #203424;
  --ds-color-success-dark-5: #223d28;
  --ds-color-success-dark-6: #24472c;
  --ds-color-success-dark-7: #22512f;
  --ds-color-success-dark-8: #4e8f5d;
  --ds-color-success-dark-9: #459359;
  --ds-color-success-dark-10: #53a066;
  --ds-color-success-dark-11: #74bc84;
  --ds-color-success-dark-12: #c3dcc7;
  --ds-color-success-dark-solid-pressed: #5daa6f;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f4eadb;
  --ds-color-warning-light-4: #f0e1c9;
  --ds-color-warning-light-5: #ecd8b7;
  --ds-color-warning-light-6: #e8cfa5;
  --ds-color-warning-light-7: #e4c592;
  --ds-color-warning-light-8: #a6803a;
  --ds-color-warning-light-9: #eab34f;
  --ds-color-warning-light-10: #d8a446;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #44300a;
  --ds-color-warning-light-solid-pressed: #cd9a3a;
  --ds-color-warning-dark-1: #1a1814;
  --ds-color-warning-dark-2: #231f19;
  --ds-color-warning-dark-3: #2e261a;
  --ds-color-warning-dark-4: #392e1a;
  --ds-color-warning-dark-5: #44351a;
  --ds-color-warning-dark-6: #503d1a;
  --ds-color-warning-dark-7: #5d4413;
  --ds-color-warning-dark-8: #a07c3b;
  --ds-color-warning-dark-9: #e2b66a;
  --ds-color-warning-dark-10: #f3c67a;
  --ds-color-warning-dark-11: #fad08a;
  --ds-color-warning-dark-12: #eadbc4;
  --ds-color-warning-dark-solid-pressed: #ffd388;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fcf2f1;
  --ds-color-danger-light-3: #fde7e4;
  --ds-color-danger-light-4: #fedbd7;
  --ds-color-danger-light-5: #fed0ca;
  --ds-color-danger-light-6: #fec4bd;
  --ds-color-danger-light-7: #feb8b0;
  --ds-color-danger-light-8: #c36f66;
  --ds-color-danger-light-9: #c1524a;
  --ds-color-danger-light-10: #b04941;
  --ds-color-danger-light-11: #943a34;
  --ds-color-danger-light-12: #522723;
  --ds-color-danger-light-solid-pressed: #a64039;
  --ds-color-danger-dark-1: #1d1716;
  --ds-color-danger-dark-2: #271e1d;
  --ds-color-danger-dark-3: #342321;
  --ds-color-danger-dark-4: #422926;
  --ds-color-danger-dark-5: #502f2b;
  --ds-color-danger-dark-6: #5e3430;
  --ds-color-danger-dark-7: #6f3833;
  --ds-color-danger-dark-8: #bb6c64;
  --ds-color-danger-dark-9: #c56a61;
  --ds-color-danger-dark-10: #d3776d;
  --ds-color-danger-dark-11: #ed948a;
  --ds-color-danger-dark-12: #f0cec9;
  --ds-color-danger-dark-solid-pressed: #de8177;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #edf5fc;
  --ds-color-info-light-3: #dceefc;
  --ds-color-info-light-4: #cae7fc;
  --ds-color-info-light-5: #b8e0fd;
  --ds-color-info-light-6: #a5d8fd;
  --ds-color-info-light-7: #92d1fd;
  --ds-color-info-light-8: #348dc4;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #043753;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #14191c;
  --ds-color-info-dark-2: #192126;
  --ds-color-info-dark-3: #192934;
  --ds-color-info-dark-4: #1a3242;
  --ds-color-info-dark-5: #193a50;
  --ds-color-info-dark-6: #17435f;
  --ds-color-info-dark-7: #0c4c71;
  --ds-color-info-dark-8: #3688bb;
  --ds-color-info-dark-9: #228bc7;
  --ds-color-info-dark-10: #3498d5;
  --ds-color-info-dark-11: #5cb4ee;
  --ds-color-info-dark-12: #bdd9ee;
  --ds-color-info-dark-solid-pressed: #40a2e0;
  --ds-color-neutral-alpha-light-2: rgb(0 39 137 / 0.051);
  --ds-color-neutral-alpha-light-3: rgb(2 46 101 / 0.091);
  --ds-color-neutral-alpha-light-4: rgb(1 33 88 / 0.126);
  --ds-color-neutral-alpha-light-5: rgb(0 31 81 / 0.161);
  --ds-color-neutral-alpha-light-6: rgb(1 27 77 / 0.197);
  --ds-color-neutral-alpha-light-7: rgb(1 27 74 / 0.232);
  --ds-color-neutral-alpha-light-8: rgb(0 15 39 / 0.499);
  --ds-color-neutral-alpha-light-9: rgb(0 13 36 / 0.565);
  --ds-color-neutral-alpha-light-10: rgb(0 10 30 / 0.632);
  --ds-color-neutral-alpha-light-11: rgb(0 9 25 / 0.683);
  --ds-color-neutral-alpha-light-12: rgb(0 2 7 / 0.867);
  --ds-color-neutral-alpha-dark-2: rgb(199 226 254 / 0.039);
  --ds-color-neutral-alpha-dark-3: rgb(212 226 254 / 0.078);
  --ds-color-neutral-alpha-dark-4: rgb(210 228 254 / 0.121);
  --ds-color-neutral-alpha-dark-5: rgb(209 222 255 / 0.164);
  --ds-color-neutral-alpha-dark-6: rgb(208 224 255 / 0.207);
  --ds-color-neutral-alpha-dark-7: rgb(204 221 254 / 0.255);
  --ds-color-neutral-alpha-dark-8: rgb(222 233 255 / 0.505);
  --ds-color-neutral-alpha-dark-9: rgb(219 230 255 / 0.522);
  --ds-color-neutral-alpha-dark-10: rgb(222 233 255 / 0.608);
  --ds-color-neutral-alpha-dark-11: rgb(229 237 255 / 0.694);
  --ds-color-neutral-alpha-dark-12: rgb(247 250 255 / 0.927);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-12: 0.75rem;
  --ds-font-size-14: 0.875rem;
  --ds-font-size-17: 1.0625rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-24: 1.5rem;
  --ds-font-size-29: 1.8125rem;
  --ds-font-size-35: 2.1875rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-16: 16px;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-32: 32px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-44: 44px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 590ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-12);
  --ds-text-body-sm-line-height: 1.3333;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0.02em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-14);
  --ds-text-body-md-line-height: 1.4286;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-17);
  --ds-text-body-lg-line-height: 1.4118;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-17)/calc(1.4118 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-12);
  --ds-text-label-sm-line-height: 1.3333;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-12);
  --ds-text-label-md-line-height: 1.3333;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0.02em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-14);
  --ds-text-label-lg-line-height: 1.4286;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-12);
  --ds-text-code-sm-line-height: 1.3333;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0.02em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-12)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-14);
  --ds-text-code-md-line-height: 1.4286;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-14);
  --ds-text-title-sm-line-height: 1.4286;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-17);
  --ds-text-title-md-line-height: 1.4118;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-17)/calc(1.4118 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-20);
  --ds-text-title-lg-line-height: 1.4;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-24);
  --ds-text-headline-sm-line-height: 1.3333;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-24)/calc(1.3333 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-29);
  --ds-text-headline-md-line-height: 1.2414;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: 0em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-29)/calc(1.2414 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-lg-size: var(--ds-font-size-35);
  --ds-text-headline-lg-line-height: 1.2571;
  --ds-text-headline-lg-weight: var(--ds-font-weight-heading);
  --ds-text-headline-lg-tracking: -0.01em;
  --ds-text-headline-lg-family: var(--ds-font-family-display);
  --ds-text-headline-lg: var(--ds-font-weight-heading) var(--ds-font-size-35)/calc(1.2571 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-14);
  --ds-text-numeric-md-line-height: 1.4286;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-14)/calc(1.4286 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-20);
  --ds-text-numeric-lg-line-height: 1.4;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-sm);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-0);
  --ds-radius-control: var(--ds-radius-0);
  --ds-radius-control-sm: var(--ds-radius-0);
  --ds-radius-container: var(--ds-radius-0);
  --ds-radius-overlay: var(--ds-radius-0);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 0px;
  --ds-radius-focus: 0px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-overlay: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-2);
  --ds-color-surface-base: var(--ds-color-neutral-light-1);
  --ds-color-surface-raised: var(--ds-color-white);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-white);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-7);
  --ds-color-border-default: var(--ds-color-neutral-light-8);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-5);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(34 36 40 / 0.45);
  --ds-color-shadow-key: rgb(34 36 40 / 0);
  --ds-color-shadow-ambient: rgb(34 36 40 / 0);
  --ds-color-shadow-ring: rgb(34 36 40 / 0.1);
  --ds-space-inset-xs: var(--ds-space-2);
  --ds-space-inset-sm: var(--ds-space-6);
  --ds-space-inset-md: var(--ds-space-8);
  --ds-space-inset-lg: var(--ds-space-12);
  --ds-space-inset-xl: var(--ds-space-20);
  --ds-space-stack-xs: var(--ds-space-2);
  --ds-space-stack-sm: var(--ds-space-6);
  --ds-space-stack-md: var(--ds-space-8);
  --ds-space-stack-lg: var(--ds-space-12);
  --ds-space-stack-xl: var(--ds-space-20);
  --ds-space-inline-xs: var(--ds-space-2);
  --ds-space-inline-sm: var(--ds-space-6);
  --ds-space-inline-md: var(--ds-space-8);
  --ds-space-section-sm: var(--ds-space-16);
  --ds-space-section-md: var(--ds-space-24);
  --ds-space-section-lg: var(--ds-space-40);
  --ds-size-control-sm: 24px;
  --ds-size-control-md: 32px;
  --ds-size-control-lg: 40px;
  --ds-size-row-sm: 36px;
  --ds-size-row-md: 40px;
  --ds-size-row-lg: 48px;
  --ds-size-row-two-line: 64px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-terminal { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-terminal { --ds-size-target-min: 44px; } }
.odl-sys-material {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #6750a4;
  --ds-color-neutral-light-1: #fefcfb;
  --ds-color-neutral-light-2: #f7f3f1;
  --ds-color-neutral-light-3: #efebe8;
  --ds-color-neutral-light-4: #e7e2de;
  --ds-color-neutral-light-5: #dfd9d5;
  --ds-color-neutral-light-6: #d8d1cc;
  --ds-color-neutral-light-7: #d0c8c2;
  --ds-color-neutral-light-8: #8d857f;
  --ds-color-neutral-light-9: #7d746d;
  --ds-color-neutral-light-10: #6b635d;
  --ds-color-neutral-light-11: #5e5651;
  --ds-color-neutral-light-12: #272321;
  --ds-color-neutral-dark-1: #161514;
  --ds-color-neutral-dark-2: #1f1d1b;
  --ds-color-neutral-dark-3: #272522;
  --ds-color-neutral-dark-4: #312d2a;
  --ds-color-neutral-dark-5: #3a3532;
  --ds-color-neutral-dark-6: #443e3a;
  --ds-color-neutral-dark-7: #4e4742;
  --ds-color-neutral-dark-8: #877f79;
  --ds-color-neutral-dark-9: #8a817b;
  --ds-color-neutral-dark-10: #9d948d;
  --ds-color-neutral-dark-11: #b2aaa4;
  --ds-color-neutral-dark-12: #ede8e4;
  --ds-color-accent-light-1: #fdfcff;
  --ds-color-accent-light-2: #f5f3fb;
  --ds-color-accent-light-3: #eceafa;
  --ds-color-accent-light-4: #e4e0fa;
  --ds-color-accent-light-5: #ddd6f9;
  --ds-color-accent-light-6: #d5ccf9;
  --ds-color-accent-light-7: #cdc3f8;
  --ds-color-accent-light-8: #8c7dbe;
  --ds-color-accent-light-9: #6750a4;
  --ds-color-accent-light-10: #5c4694;
  --ds-color-accent-light-11: #554287;
  --ds-color-accent-light-12: #372f50;
  --ds-color-accent-light-solid-pressed: #543e8b;
  --ds-color-accent-dark-1: #19181d;
  --ds-color-accent-dark-2: #201f27;
  --ds-color-accent-dark-3: #292536;
  --ds-color-accent-dark-4: #312c44;
  --ds-color-accent-dark-5: #3a3353;
  --ds-color-accent-dark-6: #433a62;
  --ds-color-accent-dark-7: #4d4075;
  --ds-color-accent-dark-8: #8876c2;
  --ds-color-accent-dark-9: #8c76cd;
  --ds-color-accent-dark-10: #9883dc;
  --ds-color-accent-dark-11: #b3a0f5;
  --ds-color-accent-dark-12: #d8d2f1;
  --ds-color-accent-dark-solid-pressed: #a28de6;
  --ds-color-success-light-1: #fafefa;
  --ds-color-success-light-2: #edf6ef;
  --ds-color-success-light-3: #def0e0;
  --ds-color-success-light-4: #cdead2;
  --ds-color-success-light-5: #bce4c3;
  --ds-color-success-light-6: #abdeb4;
  --ds-color-success-light-7: #9ad8a6;
  --ds-color-success-light-8: #429659;
  --ds-color-success-light-9: #00883d;
  --ds-color-success-light-10: #007b36;
  --ds-color-success-light-11: #00652c;
  --ds-color-success-light-12: #0e3c1c;
  --ds-color-success-light-solid-pressed: #007132;
  --ds-color-success-dark-1: #151a15;
  --ds-color-success-dark-2: #1a211b;
  --ds-color-success-dark-3: #1b2b1e;
  --ds-color-success-dark-4: #1d3422;
  --ds-color-success-dark-5: #1e3e25;
  --ds-color-success-dark-6: #1e4829;
  --ds-color-success-dark-7: #19532a;
  --ds-color-success-dark-8: #439157;
  --ds-color-success-dark-9: #369552;
  --ds-color-success-dark-10: #44a25e;
  --ds-color-success-dark-11: #69be7d;
  --ds-color-success-dark-12: #c0ddc5;
  --ds-color-success-dark-solid-pressed: #4fac68;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ec;
  --ds-color-warning-light-3: #f4eada;
  --ds-color-warning-light-4: #f1e1c8;
  --ds-color-warning-light-5: #edd8b5;
  --ds-color-warning-light-6: #e9cea2;
  --ds-color-warning-light-7: #e6c58e;
  --ds-color-warning-light-8: #a87f34;
  --ds-color-warning-light-9: #edb345;
  --ds-color-warning-light-10: #dba43d;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #453005;
  --ds-color-warning-light-solid-pressed: #d09a30;
  --ds-color-warning-dark-1: #1b1814;
  --ds-color-warning-dark-2: #231f19;
  --ds-color-warning-dark-3: #2e2619;
  --ds-color-warning-dark-4: #3a2e19;
  --ds-color-warning-dark-5: #453518;
  --ds-color-warning-dark-6: #513c17;
  --ds-color-warning-dark-7: #5e440e;
  --ds-color-warning-dark-8: #a27b36;
  --ds-color-warning-dark-9: #e4b564;
  --ds-color-warning-dark-10: #f5c574;
  --ds-color-warning-dark-11: #fccf84;
  --ds-color-warning-dark-12: #e3d4bb;
  --ds-color-warning-dark-solid-pressed: #ffd286;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fdf2f0;
  --ds-color-danger-light-3: #ffe6e3;
  --ds-color-danger-light-4: #ffdbd6;
  --ds-color-danger-light-5: #ffcfc9;
  --ds-color-danger-light-6: #ffc4bc;
  --ds-color-danger-light-7: #ffb8af;
  --ds-color-danger-light-8: #c96b62;
  --ds-color-danger-light-9: #c84c43;
  --ds-color-danger-light-10: #b7423b;
  --ds-color-danger-light-11: #9a342e;
  --ds-color-danger-light-12: #552521;
  --ds-color-danger-light-solid-pressed: #ad3933;
  --ds-color-danger-dark-1: #1d1716;
  --ds-color-danger-dark-2: #281e1c;
  --ds-color-danger-dark-3: #362320;
  --ds-color-danger-dark-4: #442825;
  --ds-color-danger-dark-5: #532d29;
  --ds-color-danger-dark-6: #62332e;
  --ds-color-danger-dark-7: #733630;
  --ds-color-danger-dark-8: #c06960;
  --ds-color-danger-dark-9: #cb665c;
  --ds-color-danger-dark-10: #da7369;
  --ds-color-danger-dark-11: #f59287;
  --ds-color-danger-dark-12: #f3cdc8;
  --ds-color-danger-dark-solid-pressed: #e57d72;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #ebf6fd;
  --ds-color-info-light-3: #d9efff;
  --ds-color-info-light-4: #c7e7ff;
  --ds-color-info-light-5: #b5e0ff;
  --ds-color-info-light-6: #a3d8ff;
  --ds-color-info-light-7: #8fd1ff;
  --ds-color-info-light-8: #008ed1;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #003755;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #13191d;
  --ds-color-info-dark-2: #172128;
  --ds-color-info-dark-3: #162a37;
  --ds-color-info-dark-4: #133246;
  --ds-color-info-dark-5: #0d3b56;
  --ds-color-info-dark-6: #024466;
  --ds-color-info-dark-7: #004d73;
  --ds-color-info-dark-8: #0789c9;
  --ds-color-info-dark-9: #008ccd;
  --ds-color-info-dark-10: #0099e1;
  --ds-color-info-dark-11: #3fb5fd;
  --ds-color-info-dark-12: #b7daf4;
  --ds-color-info-dark-solid-pressed: #01a4f0;
  --ds-color-neutral-alpha-light-2: rgb(110 37 0 / 0.055);
  --ds-color-neutral-alpha-light-3: rgb(79 35 2 / 0.091);
  --ds-color-neutral-alpha-light-4: rgb(70 32 1 / 0.13);
  --ds-color-neutral-alpha-light-5: rgb(61 25 0 / 0.165);
  --ds-color-neutral-alpha-light-6: rgb(60 25 0 / 0.2);
  --ds-color-neutral-alpha-light-7: rgb(59 26 1 / 0.24);
  --ds-color-neutral-alpha-light-8: rgb(28 12 0 / 0.502);
  --ds-color-neutral-alpha-light-9: rgb(28 12 0 / 0.573);
  --ds-color-neutral-alpha-light-10: rgb(22 10 0 / 0.636);
  --ds-color-neutral-alpha-light-11: rgb(19 8 0 / 0.683);
  --ds-color-neutral-alpha-light-12: rgb(7 2 0 / 0.871);
  --ds-color-neutral-alpha-dark-2: rgb(253 226 199 / 0.039);
  --ds-color-neutral-alpha-dark-3: rgb(255 240 212 / 0.073);
  --ds-color-neutral-alpha-dark-4: rgb(255 228 210 / 0.116);
  --ds-color-neutral-alpha-dark-5: rgb(254 227 214 / 0.155);
  --ds-color-neutral-alpha-dark-6: rgb(254 228 212 / 0.198);
  --ds-color-neutral-alpha-dark-7: rgb(254 228 211 / 0.241);
  --ds-color-neutral-alpha-dark-8: rgb(255 240 228 / 0.485);
  --ds-color-neutral-alpha-dark-9: rgb(255 238 227 / 0.498);
  --ds-color-neutral-alpha-dark-10: rgb(255 240 229 / 0.58);
  --ds-color-neutral-alpha-dark-11: rgb(255 243 235 / 0.67);
  --ds-color-neutral-alpha-dark-12: rgb(255 250 245 / 0.923);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-25: 1.5625rem;
  --ds-font-size-31: 1.9375rem;
  --ds-font-size-39: 2.4375rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 750ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 750;
  --ds-font-weight-display: 850;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-20);
  --ds-text-body-lg-line-height: 1.4;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-20);
  --ds-text-title-md-line-height: 1.4;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-25);
  --ds-text-title-lg-line-height: 1.44;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-31);
  --ds-text-headline-sm-line-height: 1.2903;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-31)/calc(1.2903 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-39);
  --ds-text-headline-md-line-height: 1.2308;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-39)/calc(1.2308 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-25);
  --ds-text-numeric-lg-line-height: 1.44;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-sm-size: var(--ds-font-size-13);
  --ds-text-emphasized-body-sm-line-height: 1.5385;
  --ds-text-emphasized-body-sm-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-sm-tracking: 0em;
  --ds-text-emphasized-body-sm-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-md-size: var(--ds-font-size-16);
  --ds-text-emphasized-body-md-line-height: 1.5;
  --ds-text-emphasized-body-md-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-md-tracking: 0em;
  --ds-text-emphasized-body-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-md: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-body-lg-size: var(--ds-font-size-20);
  --ds-text-emphasized-body-lg-line-height: 1.4;
  --ds-text-emphasized-body-lg-weight: var(--ds-font-weight-label);
  --ds-text-emphasized-body-lg-tracking: 0em;
  --ds-text-emphasized-body-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-body-lg: var(--ds-font-weight-label) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-label-md-size: var(--ds-font-size-13);
  --ds-text-emphasized-label-md-line-height: 1.5385;
  --ds-text-emphasized-label-md-weight: var(--ds-font-weight-heading);
  --ds-text-emphasized-label-md-tracking: 0em;
  --ds-text-emphasized-label-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-label-md: var(--ds-font-weight-heading) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-label-lg-size: var(--ds-font-size-16);
  --ds-text-emphasized-label-lg-line-height: 1.5;
  --ds-text-emphasized-label-lg-weight: var(--ds-font-weight-heading);
  --ds-text-emphasized-label-lg-tracking: 0em;
  --ds-text-emphasized-label-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-label-lg: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-sm-size: var(--ds-font-size-16);
  --ds-text-emphasized-title-sm-line-height: 1.5;
  --ds-text-emphasized-title-sm-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-sm-tracking: 0em;
  --ds-text-emphasized-title-sm-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-sm: var(--ds-font-weight-display) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-md-size: var(--ds-font-size-20);
  --ds-text-emphasized-title-md-line-height: 1.4;
  --ds-text-emphasized-title-md-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-md-tracking: 0em;
  --ds-text-emphasized-title-md-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-md: var(--ds-font-weight-display) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-title-lg-size: var(--ds-font-size-25);
  --ds-text-emphasized-title-lg-line-height: 1.44;
  --ds-text-emphasized-title-lg-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-title-lg-tracking: 0em;
  --ds-text-emphasized-title-lg-family: var(--ds-font-family-text);
  --ds-text-emphasized-title-lg: var(--ds-font-weight-display) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-emphasized-headline-sm-size: var(--ds-font-size-31);
  --ds-text-emphasized-headline-sm-line-height: 1.2903;
  --ds-text-emphasized-headline-sm-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-headline-sm-tracking: 0em;
  --ds-text-emphasized-headline-sm-family: var(--ds-font-family-display);
  --ds-text-emphasized-headline-sm: var(--ds-font-weight-display) var(--ds-font-size-31)/calc(1.2903 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-emphasized-headline-md-size: var(--ds-font-size-39);
  --ds-text-emphasized-headline-md-line-height: 1.2308;
  --ds-text-emphasized-headline-md-weight: var(--ds-font-weight-display);
  --ds-text-emphasized-headline-md-tracking: -0.01em;
  --ds-text-emphasized-headline-md-family: var(--ds-font-family-display);
  --ds-text-emphasized-headline-md: var(--ds-font-weight-display) var(--ds-font-size-39)/calc(1.2308 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-6);
  --ds-radius-control: var(--ds-radius-12);
  --ds-radius-control-sm: var(--ds-radius-8);
  --ds-radius-container: var(--ds-radius-16);
  --ds-radius-overlay: var(--ds-radius-24);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 2px;
  --ds-radius-focus: 14px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-3);
  --ds-color-surface-base: var(--ds-color-neutral-light-2);
  --ds-color-surface-raised: var(--ds-color-neutral-light-1);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-accent-light-9);
  --ds-color-surface-tinted: var(--ds-color-accent-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-neutral-light-1);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-5);
  --ds-color-border-default: var(--ds-color-neutral-light-6);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-3);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(39 35 33 / 0.45);
  --ds-color-shadow-key: rgb(39 35 33 / 0.135);
  --ds-color-shadow-ambient: rgb(39 35 33 / 0.115);
  --ds-color-shadow-ring: rgb(39 35 33 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-material { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-material { --ds-size-target-min: 44px; } }
.odl-sys-nordic {
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-brand-seed: #2f6f8f;
  --ds-color-neutral-light-1: #fefcfb;
  --ds-color-neutral-light-2: #f7f3f1;
  --ds-color-neutral-light-3: #efebe8;
  --ds-color-neutral-light-4: #e7e2de;
  --ds-color-neutral-light-5: #dfd9d5;
  --ds-color-neutral-light-6: #d8d1cc;
  --ds-color-neutral-light-7: #d0c8c2;
  --ds-color-neutral-light-8: #8d857f;
  --ds-color-neutral-light-9: #7d746d;
  --ds-color-neutral-light-10: #6b635d;
  --ds-color-neutral-light-11: #5e5651;
  --ds-color-neutral-light-12: #272321;
  --ds-color-neutral-dark-1: #161514;
  --ds-color-neutral-dark-2: #1f1d1b;
  --ds-color-neutral-dark-3: #272522;
  --ds-color-neutral-dark-4: #312d2a;
  --ds-color-neutral-dark-5: #3a3532;
  --ds-color-neutral-dark-6: #443e3a;
  --ds-color-neutral-dark-7: #4e4742;
  --ds-color-neutral-dark-8: #877f79;
  --ds-color-neutral-dark-9: #8a817b;
  --ds-color-neutral-dark-10: #9d948d;
  --ds-color-neutral-dark-11: #b2aaa4;
  --ds-color-neutral-dark-12: #ede8e4;
  --ds-color-accent-light-1: #fbfdff;
  --ds-color-accent-light-2: #f0f5f8;
  --ds-color-accent-light-3: #e3edf3;
  --ds-color-accent-light-4: #d5e5ef;
  --ds-color-accent-light-5: #c7deeb;
  --ds-color-accent-light-6: #b9d6e7;
  --ds-color-accent-light-7: #accee3;
  --ds-color-accent-light-8: #5f8ca4;
  --ds-color-accent-light-9: #2f6f8f;
  --ds-color-accent-light-10: #286381;
  --ds-color-accent-light-11: #295c76;
  --ds-color-accent-light-12: #1f3743;
  --ds-color-accent-light-solid-pressed: #1e5b78;
  --ds-color-accent-dark-1: #15191b;
  --ds-color-accent-dark-2: #1b2024;
  --ds-color-accent-dark-3: #1e292f;
  --ds-color-accent-dark-4: #21313a;
  --ds-color-accent-dark-5: #243a46;
  --ds-color-accent-dark-6: #274352;
  --ds-color-accent-dark-7: #274d60;
  --ds-color-accent-dark-8: #5388a4;
  --ds-color-accent-dark-9: #4d8bac;
  --ds-color-accent-dark-10: #5a98ba;
  --ds-color-accent-dark-11: #79b3d3;
  --ds-color-accent-dark-12: #c5d9e4;
  --ds-color-accent-dark-solid-pressed: #63a2c4;
  --ds-color-success-light-1: #fafefb;
  --ds-color-success-light-2: #eff6f0;
  --ds-color-success-light-3: #e1efe3;
  --ds-color-success-light-4: #d2e9d5;
  --ds-color-success-light-5: #c3e2c8;
  --ds-color-success-light-6: #b4dcbb;
  --ds-color-success-light-7: #a5d5ae;
  --ds-color-success-light-8: #559363;
  --ds-color-success-light-9: #288646;
  --ds-color-success-light-10: #20793d;
  --ds-color-success-light-11: #166430;
  --ds-color-success-light-12: #1a3a22;
  --ds-color-success-light-solid-pressed: #147135;
  --ds-color-success-dark-1: #151916;
  --ds-color-success-dark-2: #1b211c;
  --ds-color-success-dark-3: #1e2a20;
  --ds-color-success-dark-4: #213325;
  --ds-color-success-dark-5: #243d29;
  --ds-color-success-dark-6: #27462e;
  --ds-color-success-dark-7: #275131;
  --ds-color-success-dark-8: #548e61;
  --ds-color-success-dark-9: #4d925e;
  --ds-color-success-dark-10: #5a9f6a;
  --ds-color-success-dark-11: #7aba87;
  --ds-color-success-dark-12: #c5dbc9;
  --ds-color-success-dark-solid-pressed: #64a974;
  --ds-color-warning-light-1: #fffcf9;
  --ds-color-warning-light-2: #f8f4ed;
  --ds-color-warning-light-3: #f3eadc;
  --ds-color-warning-light-4: #efe1ca;
  --ds-color-warning-light-5: #ebd8b9;
  --ds-color-warning-light-6: #e7cfa7;
  --ds-color-warning-light-7: #e3c595;
  --ds-color-warning-light-8: #a5803f;
  --ds-color-warning-light-9: #e8b456;
  --ds-color-warning-light-10: #d6a54d;
  --ds-color-warning-light-11: #845d00;
  --ds-color-warning-light-12: #43310d;
  --ds-color-warning-light-solid-pressed: #cb9b41;
  --ds-color-warning-dark-1: #1a1814;
  --ds-color-warning-dark-2: #231f19;
  --ds-color-warning-dark-3: #2e261a;
  --ds-color-warning-dark-4: #392e1c;
  --ds-color-warning-dark-5: #44351c;
  --ds-color-warning-dark-6: #4f3d1c;
  --ds-color-warning-dark-7: #5c4417;
  --ds-color-warning-dark-8: #9e7c3f;
  --ds-color-warning-dark-9: #e1b76e;
  --ds-color-warning-dark-10: #f2c77f;
  --ds-color-warning-dark-11: #f9d18e;
  --ds-color-warning-dark-12: #eadcc5;
  --ds-color-warning-dark-solid-pressed: #ffd48b;
  --ds-color-danger-light-1: #fffcfc;
  --ds-color-danger-light-2: #fcf2f1;
  --ds-color-danger-light-3: #fce7e4;
  --ds-color-danger-light-4: #fcdcd8;
  --ds-color-danger-light-5: #fcd1cb;
  --ds-color-danger-light-6: #fbc5be;
  --ds-color-danger-light-7: #fabab2;
  --ds-color-danger-light-8: #bf7169;
  --ds-color-danger-light-9: #bc564d;
  --ds-color-danger-light-10: #ab4c44;
  --ds-color-danger-light-11: #903e37;
  --ds-color-danger-light-12: #502924;
  --ds-color-danger-light-solid-pressed: #a2443c;
  --ds-color-danger-dark-1: #1c1716;
  --ds-color-danger-dark-2: #261e1d;
  --ds-color-danger-dark-3: #342422;
  --ds-color-danger-dark-4: #412a27;
  --ds-color-danger-dark-5: #4f2f2c;
  --ds-color-danger-dark-6: #5d3531;
  --ds-color-danger-dark-7: #6d3a35;
  --ds-color-danger-dark-8: #b76e66;
  --ds-color-danger-dark-9: #c06d64;
  --ds-color-danger-dark-10: #cf7a70;
  --ds-color-danger-dark-11: #e9978d;
  --ds-color-danger-dark-12: #eecfcb;
  --ds-color-danger-dark-solid-pressed: #da837a;
  --ds-color-info-light-1: #fbfdff;
  --ds-color-info-light-2: #eef5fb;
  --ds-color-info-light-3: #deeefa;
  --ds-color-info-light-4: #cde6f9;
  --ds-color-info-light-5: #bcdff9;
  --ds-color-info-light-6: #abd8f8;
  --ds-color-info-light-7: #9ad0f7;
  --ds-color-info-light-8: #438dbd;
  --ds-color-info-light-9: #007cb7;
  --ds-color-info-light-10: #0070a6;
  --ds-color-info-light-11: #005c8a;
  --ds-color-info-light-12: #0f3750;
  --ds-color-info-light-solid-pressed: #006799;
  --ds-color-info-dark-1: #15191c;
  --ds-color-info-dark-2: #1a2125;
  --ds-color-info-dark-3: #1c2933;
  --ds-color-info-dark-4: #1d3240;
  --ds-color-info-dark-5: #1e3a4d;
  --ds-color-info-dark-6: #1e435b;
  --ds-color-info-dark-7: #1a4c6c;
  --ds-color-info-dark-8: #4388b5;
  --ds-color-info-dark-9: #388bbf;
  --ds-color-info-dark-10: #4698cd;
  --ds-color-info-dark-11: #69b3e6;
  --ds-color-info-dark-12: #c0d9ec;
  --ds-color-info-dark-solid-pressed: #51a2d8;
  --ds-color-neutral-alpha-light-2: rgb(110 37 0 / 0.055);
  --ds-color-neutral-alpha-light-3: rgb(79 35 2 / 0.091);
  --ds-color-neutral-alpha-light-4: rgb(70 32 1 / 0.13);
  --ds-color-neutral-alpha-light-5: rgb(61 25 0 / 0.165);
  --ds-color-neutral-alpha-light-6: rgb(60 25 0 / 0.2);
  --ds-color-neutral-alpha-light-7: rgb(59 26 1 / 0.24);
  --ds-color-neutral-alpha-light-8: rgb(28 12 0 / 0.502);
  --ds-color-neutral-alpha-light-9: rgb(28 12 0 / 0.573);
  --ds-color-neutral-alpha-light-10: rgb(22 10 0 / 0.636);
  --ds-color-neutral-alpha-light-11: rgb(19 8 0 / 0.683);
  --ds-color-neutral-alpha-light-12: rgb(7 2 0 / 0.871);
  --ds-color-neutral-alpha-dark-2: rgb(253 226 199 / 0.039);
  --ds-color-neutral-alpha-dark-3: rgb(255 240 212 / 0.073);
  --ds-color-neutral-alpha-dark-4: rgb(255 228 210 / 0.116);
  --ds-color-neutral-alpha-dark-5: rgb(254 227 214 / 0.155);
  --ds-color-neutral-alpha-dark-6: rgb(254 228 212 / 0.198);
  --ds-color-neutral-alpha-dark-7: rgb(254 228 211 / 0.241);
  --ds-color-neutral-alpha-dark-8: rgb(255 240 228 / 0.485);
  --ds-color-neutral-alpha-dark-9: rgb(255 238 227 / 0.498);
  --ds-color-neutral-alpha-dark-10: rgb(255 240 229 / 0.58);
  --ds-color-neutral-alpha-dark-11: rgb(255 243 235 / 0.67);
  --ds-color-neutral-alpha-dark-12: rgb(255 250 245 / 0.923);
  --ds-opacity-state-hover: 0.08;
  --ds-opacity-state-focus: 0.1;
  --ds-opacity-state-pressed: 0.1;
  --ds-opacity-state-drag: 0.16;
  --ds-opacity-disabled-container: 0.12;
  --ds-opacity-disabled-content: 0.38;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-25: 1.5625rem;
  --ds-font-size-31: 1.9375rem;
  --ds-font-size-39: 2.4375rem;
  --ds-font-size-input: 1rem;
  --ds-font-line-height-20: 20px;
  --ds-font-line-height-24: 24px;
  --ds-font-line-height-28: 28px;
  --ds-font-line-height-36: 36px;
  --ds-font-line-height-40: 40px;
  --ds-font-line-height-48: 48px;
  --ds-space-0: 0px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-80: 80px;
  --ds-space-96: 96px;
  --ds-radius-0: 0px;
  --ds-radius-2: 2px;
  --ds-radius-4: 4px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-radius-20: 20px;
  --ds-radius-24: 24px;
  --ds-radius-28: 28px;
  --ds-radius-32: 32px;
  --ds-radius-full: 9999px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-micro: 100ms;
  --ds-motion-duration-short: 150ms;
  --ds-motion-duration-medium: 200ms;
  --ds-motion-duration-long: 250ms;
  --ds-motion-duration-extra: 640ms;
  --ds-motion-duration-medium-exit: 160ms;
  --ds-motion-duration-long-exit: 200ms;
  --ds-motion-duration-drawer: 500ms;
  --ds-motion-duration-modal: 250ms;
  --ds-motion-duration-reduced-fade: 200ms;
  --ds-motion-duration-reveal: 600ms;
  --ds-motion-duration-stagger: 50ms;
  --ds-motion-duration-toast: 400ms;
  --ds-motion-duration-tooltip: 125ms;
  --ds-motion-easing-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-motion-easing-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --ds-motion-easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-motion-easing-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-easing-toast: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-spring-spatial-fast-duration: 410ms;
  --ds-motion-spring-spatial-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-fast-delay: 0ms;
  --ds-motion-spring-spatial-default-duration: 590ms;
  --ds-motion-spring-spatial-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-default-delay: 0ms;
  --ds-motion-spring-spatial-slow-duration: 870ms;
  --ds-motion-spring-spatial-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-spatial-slow-delay: 0ms;
  --ds-motion-spring-effects-fast-duration: 150ms;
  --ds-motion-spring-effects-fast-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-fast-delay: 0ms;
  --ds-motion-spring-effects-default-duration: 230ms;
  --ds-motion-spring-effects-default-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-default-delay: 0ms;
  --ds-motion-spring-effects-slow-duration: 330ms;
  --ds-motion-spring-effects-slow-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-spring-effects-slow-delay: 0ms;
  --ds-motion-spring-momentum-duration: 550ms;
  --ds-motion-spring-momentum-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-momentum-delay: 0ms;
  --ds-motion-spring-rotation-duration: 550ms;
  --ds-motion-spring-rotation-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-rotation-delay: 0ms;
  --ds-motion-spring-sheet-duration: 410ms;
  --ds-motion-spring-sheet-easing: linear(0, 0.053, 0.176, 0.324, 0.474, 0.609, 0.723, 0.815, 0.884, 0.934, 0.969, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
  --ds-motion-spring-sheet-delay: 0ms;
  --ds-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family-display: var(--ds-font-family-text);
  --ds-font-family-mono: ui-monospace, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-font-weight-body: 400;
  --ds-font-weight-label: 500;
  --ds-font-weight-heading: 600;
  --ds-text-body-sm-size: var(--ds-font-size-13);
  --ds-text-body-sm-line-height: 1.5385;
  --ds-text-body-sm-weight: var(--ds-font-weight-body);
  --ds-text-body-sm-tracking: 0em;
  --ds-text-body-sm-family: var(--ds-font-family-text);
  --ds-text-body-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-md-size: var(--ds-font-size-16);
  --ds-text-body-md-line-height: 1.5;
  --ds-text-body-md-weight: var(--ds-font-weight-body);
  --ds-text-body-md-tracking: 0em;
  --ds-text-body-md-family: var(--ds-font-family-text);
  --ds-text-body-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-body-lg-size: var(--ds-font-size-20);
  --ds-text-body-lg-line-height: 1.4;
  --ds-text-body-lg-weight: var(--ds-font-weight-body);
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-lg-family: var(--ds-font-family-text);
  --ds-text-body-lg: var(--ds-font-weight-body) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-sm-size: var(--ds-font-size-13);
  --ds-text-label-sm-line-height: 1.5385;
  --ds-text-label-sm-weight: var(--ds-font-weight-label);
  --ds-text-label-sm-tracking: 0.05em;
  --ds-text-label-sm-family: var(--ds-font-family-text);
  --ds-text-label-sm: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-md-size: var(--ds-font-size-13);
  --ds-text-label-md-line-height: 1.5385;
  --ds-text-label-md-weight: var(--ds-font-weight-label);
  --ds-text-label-md-tracking: 0em;
  --ds-text-label-md-family: var(--ds-font-family-text);
  --ds-text-label-md: var(--ds-font-weight-label) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-label-lg-size: var(--ds-font-size-16);
  --ds-text-label-lg-line-height: 1.5;
  --ds-text-label-lg-weight: var(--ds-font-weight-label);
  --ds-text-label-lg-tracking: 0em;
  --ds-text-label-lg-family: var(--ds-font-family-text);
  --ds-text-label-lg: var(--ds-font-weight-label) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-code-sm-size: var(--ds-font-size-13);
  --ds-text-code-sm-line-height: 1.5385;
  --ds-text-code-sm-weight: var(--ds-font-weight-body);
  --ds-text-code-sm-tracking: 0em;
  --ds-text-code-sm-family: var(--ds-font-family-mono);
  --ds-text-code-sm: var(--ds-font-weight-body) var(--ds-font-size-13)/calc(1.5385 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-code-md-size: var(--ds-font-size-16);
  --ds-text-code-md-line-height: 1.5;
  --ds-text-code-md-weight: var(--ds-font-weight-body);
  --ds-text-code-md-tracking: 0em;
  --ds-text-code-md-family: var(--ds-font-family-mono);
  --ds-text-code-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-mono);
  --ds-text-title-sm-size: var(--ds-font-size-16);
  --ds-text-title-sm-line-height: 1.5;
  --ds-text-title-sm-weight: var(--ds-font-weight-heading);
  --ds-text-title-sm-tracking: 0em;
  --ds-text-title-sm-family: var(--ds-font-family-text);
  --ds-text-title-sm: var(--ds-font-weight-heading) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-md-size: var(--ds-font-size-20);
  --ds-text-title-md-line-height: 1.4;
  --ds-text-title-md-weight: var(--ds-font-weight-heading);
  --ds-text-title-md-tracking: 0em;
  --ds-text-title-md-family: var(--ds-font-family-text);
  --ds-text-title-md: var(--ds-font-weight-heading) var(--ds-font-size-20)/calc(1.4 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-title-lg-size: var(--ds-font-size-25);
  --ds-text-title-lg-line-height: 1.44;
  --ds-text-title-lg-weight: var(--ds-font-weight-heading);
  --ds-text-title-lg-tracking: 0em;
  --ds-text-title-lg-family: var(--ds-font-family-text);
  --ds-text-title-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-headline-sm-size: var(--ds-font-size-31);
  --ds-text-headline-sm-line-height: 1.2903;
  --ds-text-headline-sm-weight: var(--ds-font-weight-heading);
  --ds-text-headline-sm-tracking: 0em;
  --ds-text-headline-sm-family: var(--ds-font-family-display);
  --ds-text-headline-sm: var(--ds-font-weight-heading) var(--ds-font-size-31)/calc(1.2903 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-headline-md-size: var(--ds-font-size-39);
  --ds-text-headline-md-line-height: 1.2308;
  --ds-text-headline-md-weight: var(--ds-font-weight-heading);
  --ds-text-headline-md-tracking: -0.01em;
  --ds-text-headline-md-family: var(--ds-font-family-display);
  --ds-text-headline-md: var(--ds-font-weight-heading) var(--ds-font-size-39)/calc(1.2308 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-display);
  --ds-text-numeric-md-size: var(--ds-font-size-16);
  --ds-text-numeric-md-line-height: 1.5;
  --ds-text-numeric-md-weight: var(--ds-font-weight-body);
  --ds-text-numeric-md-tracking: 0em;
  --ds-text-numeric-md-family: var(--ds-font-family-text);
  --ds-text-numeric-md: var(--ds-font-weight-body) var(--ds-font-size-16)/calc(1.5 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-text-numeric-lg-size: var(--ds-font-size-25);
  --ds-text-numeric-lg-line-height: 1.44;
  --ds-text-numeric-lg-weight: var(--ds-font-weight-heading);
  --ds-text-numeric-lg-tracking: 0em;
  --ds-text-numeric-lg-family: var(--ds-font-family-text);
  --ds-text-numeric-lg: var(--ds-font-weight-heading) var(--ds-font-size-25)/calc(1.44 * var(--ds-script-line-height-scale, 1)) var(--ds-font-family-text);
  --ds-space-target-gap: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-default: var(--ds-size-icon-md);
  --ds-size-target-pointer: 24px;
  --ds-size-target-touch: 44px;
  --ds-size-target-min: 44px;
  --ds-icon-stroke-sm: 1.5px;
  --ds-icon-stroke-md: 2px;
  --ds-icon-stroke-lg: 2.5px;
  --ds-radius-detail: var(--ds-radius-6);
  --ds-radius-control: var(--ds-radius-12);
  --ds-radius-control-sm: var(--ds-radius-8);
  --ds-radius-container: var(--ds-radius-16);
  --ds-radius-overlay: var(--ds-radius-24);
  --ds-radius-person: var(--ds-radius-full);
  --ds-radius-nested: 2px;
  --ds-radius-focus: 14px;
  --ds-border-width-default: var(--ds-border-width-1);
  --ds-border-width-selected: var(--ds-border-width-2);
  --ds-border-width-emphasis: var(--ds-border-width-4);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-elevation-raised: 0px 0px 0px 0px var(--ds-color-shadow-key);
  --ds-elevation-floating: 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 4px 12px 0px var(--ds-color-shadow-ambient);
  --ds-elevation-overlay: 0px 1px 2px 0px var(--ds-color-shadow-key), 0px 12px 32px 0px var(--ds-color-shadow-ambient);
  --ds-component-toast-duration: 4000ms;
  --ds-component-toast-gap: 14px;
  --ds-component-toast-offset-desktop: 32px;
  --ds-component-toast-offset-mobile: 16px;
  --ds-component-toast-visible: 3;
  --ds-motion-blur-crossfade: 2px;
  --ds-motion-gesture-deceleration-rate: 0.998;
  --ds-motion-gesture-direction-threshold: 10px;
  --ds-motion-gesture-dismiss-velocity: 0.11;
  --ds-motion-gesture-drag-lock-after-scroll: 100ms;
  --ds-motion-gesture-rubberband-constant: 0.55;
  --ds-motion-scale-enter: 0.95;
  --ds-motion-scale-enter-modal: 0.96;
  --ds-motion-scale-enter-tooltip: 0.97;
  --ds-motion-scale-press: 0.97;
  --ds-color-surface-sunken: var(--ds-color-neutral-light-3);
  --ds-color-surface-base: var(--ds-color-neutral-light-2);
  --ds-color-surface-raised: var(--ds-color-neutral-light-1);
  --ds-color-surface-overlay: var(--ds-color-white);
  --ds-color-surface-nav: var(--ds-color-neutral-light-2);
  --ds-color-text-primary: var(--ds-color-neutral-light-12);
  --ds-color-text-secondary: var(--ds-color-neutral-light-11);
  --ds-color-text-tertiary: var(--ds-color-neutral-light-10);
  --ds-color-text-disabled: var(--ds-color-neutral-light-8);
  --ds-color-text-inverse: var(--ds-color-white);
  --ds-color-text-link: var(--ds-color-accent-light-11);
  --ds-color-text-accent: var(--ds-color-accent-light-11);
  --ds-color-text-on-accent: var(--ds-color-white);
  --ds-color-text-on-action: var(--ds-color-white);
  --ds-color-text-on-brand: var(--ds-color-white);
  --ds-color-text-success: var(--ds-color-success-light-11);
  --ds-color-text-on-success: var(--ds-color-white);
  --ds-color-text-warning: var(--ds-color-warning-light-11);
  --ds-color-text-on-warning: var(--ds-color-neutral-light-12);
  --ds-color-text-danger: var(--ds-color-danger-light-11);
  --ds-color-text-on-danger: var(--ds-color-white);
  --ds-color-text-info: var(--ds-color-info-light-11);
  --ds-color-text-on-info: var(--ds-color-white);
  --ds-color-bg-neutral-subtle: var(--ds-color-neutral-light-3);
  --ds-color-bg-neutral-subtle-hover: var(--ds-color-neutral-light-4);
  --ds-color-bg-neutral-subtle-pressed: var(--ds-color-neutral-light-5);
  --ds-color-bg-accent-subtle: var(--ds-color-accent-light-3);
  --ds-color-bg-accent-subtle-hover: var(--ds-color-accent-light-4);
  --ds-color-bg-accent-subtle-pressed: var(--ds-color-accent-light-5);
  --ds-color-bg-accent-bold: var(--ds-color-accent-light-9);
  --ds-color-bg-accent-bold-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-accent-bold-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-disabled: var(--ds-color-neutral-light-3);
  --ds-color-bg-inverse: var(--ds-color-neutral-light-12);
  --ds-color-bg-field: var(--ds-color-neutral-light-1);
  --ds-color-bg-action-primary: var(--ds-color-accent-light-9);
  --ds-color-bg-action-primary-hover: var(--ds-color-accent-light-10);
  --ds-color-bg-action-primary-pressed: var(--ds-color-accent-light-solid-pressed);
  --ds-color-bg-brand: var(--ds-color-accent-light-9);
  --ds-color-bg-success-subtle: var(--ds-color-success-light-3);
  --ds-color-bg-success-bold: var(--ds-color-success-light-9);
  --ds-color-bg-success-bold-hover: var(--ds-color-success-light-10);
  --ds-color-bg-success-bold-pressed: var(--ds-color-success-light-solid-pressed);
  --ds-color-bg-warning-subtle: var(--ds-color-warning-light-3);
  --ds-color-bg-warning-bold: var(--ds-color-warning-light-9);
  --ds-color-bg-warning-bold-hover: var(--ds-color-warning-light-10);
  --ds-color-bg-warning-bold-pressed: var(--ds-color-warning-light-solid-pressed);
  --ds-color-bg-danger-subtle: var(--ds-color-danger-light-3);
  --ds-color-bg-danger-bold: var(--ds-color-danger-light-9);
  --ds-color-bg-danger-bold-hover: var(--ds-color-danger-light-10);
  --ds-color-bg-danger-bold-pressed: var(--ds-color-danger-light-solid-pressed);
  --ds-color-bg-info-subtle: var(--ds-color-info-light-3);
  --ds-color-bg-info-bold: var(--ds-color-info-light-9);
  --ds-color-bg-info-bold-hover: var(--ds-color-info-light-10);
  --ds-color-bg-info-bold-pressed: var(--ds-color-info-light-solid-pressed);
  --ds-color-border-subtle: var(--ds-color-neutral-light-5);
  --ds-color-border-default: var(--ds-color-neutral-light-6);
  --ds-color-border-strong: var(--ds-color-neutral-light-8);
  --ds-color-border-input: var(--ds-color-neutral-light-8);
  --ds-color-border-focus: var(--ds-color-accent-light-9);
  --ds-color-border-accent: var(--ds-color-accent-light-8);
  --ds-color-border-separator: var(--ds-color-neutral-light-3);
  --ds-color-border-success: var(--ds-color-success-light-8);
  --ds-color-border-warning: var(--ds-color-warning-light-8);
  --ds-color-border-danger: var(--ds-color-danger-light-8);
  --ds-color-border-info: var(--ds-color-info-light-8);
  --ds-color-icon-default: var(--ds-color-neutral-light-11);
  --ds-color-icon-subtle: var(--ds-color-neutral-light-10);
  --ds-color-icon-accent: var(--ds-color-accent-light-11);
  --ds-color-icon-on-accent: var(--ds-color-white);
  --ds-color-overlay-scrim: rgb(39 35 33 / 0.45);
  --ds-color-shadow-key: rgb(39 35 33 / 0.135);
  --ds-color-shadow-ambient: rgb(39 35 33 / 0.115);
  --ds-color-shadow-ring: rgb(39 35 33 / 0.1);
  --ds-space-inset-xs: var(--ds-space-4);
  --ds-space-inset-sm: var(--ds-space-8);
  --ds-space-inset-md: var(--ds-space-12);
  --ds-space-inset-lg: var(--ds-space-16);
  --ds-space-inset-xl: var(--ds-space-24);
  --ds-space-stack-xs: var(--ds-space-4);
  --ds-space-stack-sm: var(--ds-space-8);
  --ds-space-stack-md: var(--ds-space-12);
  --ds-space-stack-lg: var(--ds-space-16);
  --ds-space-stack-xl: var(--ds-space-24);
  --ds-space-inline-xs: var(--ds-space-4);
  --ds-space-inline-sm: var(--ds-space-8);
  --ds-space-inline-md: var(--ds-space-12);
  --ds-space-section-sm: var(--ds-space-32);
  --ds-space-section-md: var(--ds-space-40);
  --ds-space-section-lg: var(--ds-space-64);
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-row-sm: 44px;
  --ds-size-row-md: 48px;
  --ds-size-row-lg: 56px;
  --ds-size-row-two-line: 72px;
  --ds-motion-transition-feedback-duration: 100ms;
  --ds-motion-transition-feedback-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-transition-feedback-delay: 0ms;
  --ds-motion-transition-enter-duration: 200ms;
  --ds-motion-transition-enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-enter-delay: 0ms;
  --ds-motion-transition-exit-duration: 160ms;
  --ds-motion-transition-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-exit-delay: 0ms;
  --ds-motion-transition-move-duration: 590ms;
  --ds-motion-transition-move-easing: linear(0, 0.057, 0.179, 0.319, 0.453, 0.571, 0.669, 0.748, 0.811, 0.859, 0.895, 0.923, 0.944, 0.959, 0.97, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
  --ds-motion-transition-move-delay: 0ms;
  --ds-motion-transition-expand-duration: 250ms;
  --ds-motion-transition-expand-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-motion-transition-expand-delay: 0ms;
}
@media (pointer: fine) { .odl-sys-nordic { --ds-size-target-min: 24px; } }
@media (pointer: coarse) { .odl-sys-nordic { --ds-size-target-min: 44px; } }


.odl-receipts-table { box-sizing: border-box; inline-size: 100%; max-inline-size: 1040px; position: relative; container-type: inline-size; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); overflow: hidden; text-wrap: pretty; }
.odl-receipts-table .odl-scroll { overflow-x: auto; }
.odl-receipts-table .odl-top { display: grid; gap: var(--ds-space-2);
  padding: var(--ds-space-inset-md) var(--ds-space-inset-md) var(--ds-space-inset-sm); }
.odl-receipts-table h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-receipts-table .odl-top p { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-receipts-table table { inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.odl-receipts-table th { text-align: start; padding: 0 var(--ds-space-inset-sm); block-size: var(--ds-size-row-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md);
  background: var(--ds-color-surface-sunken); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); white-space: nowrap; }
.odl-receipts-table td { padding: 0 var(--ds-space-inset-sm); block-size: var(--ds-size-row-md); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-separator); white-space: nowrap; }
.odl-receipts-table tr:last-child td { border-block-end: 0; }
.odl-receipts-table th:first-child, .odl-receipts-table td:first-child { inline-size: 1%; padding-inline-start: var(--ds-space-inset-md); }
.odl-receipts-table .odl-num { text-align: end; }
.odl-receipts-table .odl-num small { color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); margin-inline-start: var(--ds-space-2); }
.odl-receipts-table .odl-ref { color: var(--ds-color-text-secondary); font: var(--ds-text-code-sm); }
.odl-receipts-table tbody tr { transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-receipts-table tbody tr:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-receipts-table tbody tr:has(input:checked) { background: var(--ds-color-bg-accent-subtle); }
.odl-receipts-table input { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); margin: 0; accent-color: var(--ds-color-bg-action-primary); cursor: pointer; vertical-align: middle; }
.odl-receipts-table label { display: inline-grid; place-items: center; min-inline-size: var(--ds-size-target-min); min-block-size: var(--ds-size-target-min); margin: calc(-1 * var(--ds-space-4)) 0; cursor: pointer; }
.odl-receipts-table input:focus-visible, .odl-receipts-table button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-receipts-table .odl-pill { display: inline-flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm); font: var(--ds-text-label-md); }
.odl-receipts-table .odl-pill::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: currentColor; }
.odl-receipts-table .is-suggested { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); }
.odl-receipts-table .is-short { background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); }
.odl-receipts-table .is-none { background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); }
.odl-receipts-table .is-matched { background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); }
@container (max-width: 40rem) {
  .odl-receipts-table table { min-inline-size: 0; }
  .odl-receipts-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .odl-receipts-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-4) var(--ds-space-inline-sm);
    padding: var(--ds-space-inset-xs) var(--ds-space-inset-sm) var(--ds-space-inset-xs) 0; }
  .odl-receipts-table tbody tr + tr { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
  .odl-receipts-table td { block-size: auto; padding: 0; border: 0; white-space: normal; }
  .odl-receipts-table td:first-child { grid-row: span 2; padding-inline-start: var(--ds-space-inset-xs); }
  .odl-receipts-table td:nth-child(3) { display: none; }
  .odl-receipts-table td:nth-child(5) { grid-column: 2 / 4; }
  .odl-receipts-table .odl-bulk { padding: var(--ds-space-inset-xs); }
  .odl-receipts-table .odl-bulk output { flex: 1 1 100%; padding-inline: var(--ds-space-inset-xs); }
  .odl-receipts-table .odl-bulk span { display: none; }
  .odl-receipts-table .odl-bulk button { flex: 1; }
}
.odl-receipts-table .odl-bulk { display: flex; align-items: center; gap: var(--ds-space-inline-sm); margin: var(--ds-space-inset-sm); padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) var(--ds-space-inset-md);
  border-radius: var(--ds-radius-container); background: var(--ds-color-bg-inverse); color: var(--ds-color-text-inverse); box-shadow: var(--ds-elevation-floating); flex-wrap: wrap;
  transition: opacity var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-receipts-table:not(:has(tbody input:checked)) .odl-bulk { opacity: 0; visibility: hidden; }
.odl-receipts-table .odl-bulk output { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-receipts-table .odl-bulk span { flex: 1; }
.odl-receipts-table .odl-bulk button { min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-sm); border: 0; border-radius: max(0px, calc(var(--ds-radius-container) - var(--ds-space-4))); background: transparent;
  color: inherit; font: var(--ds-text-label-lg); cursor: pointer; }
.odl-receipts-table .odl-bulk button:hover { background: var(--ds-color-neutral-alpha-dark-3); }
.odl-receipts-table .odl-bulk .odl-go { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-receipts-table .odl-bulk .odl-go:hover { background: var(--ds-color-bg-neutral-subtle); }
@media (prefers-reduced-motion: reduce) { .odl-receipts-table, .odl-receipts-table *, .odl-receipts-table *::before { transition: none !important; animation: none !important; } }


.odl-kpi-strip { box-sizing: border-box; inline-size: 100%; container-type: inline-size; text-wrap: pretty; }
.odl-kpi-strip dl { box-sizing: border-box; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); overflow: hidden; font: var(--ds-text-body-md); }
.odl-kpi-strip dl > div { min-inline-size: 0; padding: var(--ds-space-inset-lg); display: grid; align-content: start; gap: var(--ds-space-stack-xs);
  box-shadow: calc(-1 * var(--ds-border-width-default)) 0 0 0 var(--ds-color-border-subtle), 0 calc(-1 * var(--ds-border-width-default)) 0 0 var(--ds-color-border-subtle); }
.odl-kpi-strip dt { color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); }
.odl-kpi-strip dd { margin: 0; }
.odl-kpi-strip .odl-value { font: var(--ds-text-title-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (min-width: 26rem) { .odl-kpi-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 50rem) { .odl-kpi-strip dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.odl-kpi-strip .odl-value span { color: var(--ds-color-text-tertiary); }
.odl-kpi-strip .odl-note { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-kpi-strip .odl-meter { display: flex; align-items: center; gap: var(--ds-space-inline-sm); }
.odl-kpi-strip .odl-meter i { flex: 1; max-inline-size: 6rem; block-size: var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-kpi-strip .odl-meter i::before { content: ""; display: block; block-size: 100%; inline-size: var(--odl-fill, 50%); background: var(--ds-color-bg-action-primary); border-radius: inherit; }
.odl-kpi-strip .odl-warn { color: var(--ds-color-text-warning); }
@container (max-width: 25.98rem) {
  .odl-kpi-strip dl > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--ds-space-inline-md); row-gap: var(--ds-space-4); padding: var(--ds-space-inset-md); }
  .odl-kpi-strip dt { grid-column: 1; grid-row: 1; }
  .odl-kpi-strip .odl-value { grid-column: 2; grid-row: 1; font: var(--ds-text-title-md); text-align: end; }
  .odl-kpi-strip .odl-note { grid-column: 1 / -1; }
}


.odl-activity-feed { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 640px; margin: 0; padding: var(--ds-space-inset-lg); list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-activity-feed > li { position: relative; display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr); gap: var(--ds-space-inline-sm); }
.odl-activity-feed > li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(var(--ds-size-control-sm) / 2); inset-block: var(--ds-size-control-sm) calc(-1 * var(--ds-space-stack-md));
  border-inline-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-activity-feed .odl-icon { inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); display: grid; place-items: center; border-radius: var(--ds-radius-control);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-base); color: var(--ds-color-icon-subtle); }
.odl-activity-feed .odl-icon svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-activity-feed .odl-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--ds-space-inline-md); min-block-size: var(--ds-size-control-sm); align-items: center; }
.odl-activity-feed .odl-line p { margin: 0; color: var(--ds-color-text-secondary); }
.odl-activity-feed .odl-line strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-activity-feed .odl-line p { text-wrap: balance; }
.odl-activity-feed .odl-nb { white-space: nowrap; }
.odl-activity-feed time { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-activity-feed dl { margin: var(--ds-space-stack-xs) 0 0; border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); overflow: hidden;
  background: var(--ds-color-surface-base); }
.odl-activity-feed dl div { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-xs) var(--ds-space-inset-md); align-items: baseline;
  font-variant-numeric: tabular-nums; }
.odl-activity-feed dl div + div { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-activity-feed dt { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-activity-feed dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-4) var(--ds-space-inline-xs); }
.odl-activity-feed .odl-to { white-space: nowrap; }
.odl-activity-feed del { color: var(--ds-color-text-tertiary); }
.odl-activity-feed ins { text-decoration: none; font-weight: var(--ds-font-weight-label); }
.odl-activity-feed .odl-delta { color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-activity-feed blockquote { margin: var(--ds-space-stack-xs) 0 0; padding-inline-start: var(--ds-space-inset-sm); border-inline-start: var(--ds-border-width-emphasis) solid var(--ds-color-border-default);
  color: var(--ds-color-text-secondary); }
.odl-activity-feed a { color: var(--ds-color-text-link); text-underline-offset: 0.2em; }
.odl-activity-feed dd { min-inline-size: 0; }
@container (max-width: 22rem) { .odl-activity-feed dl div { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-2); } }
.odl-activity-feed a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); border-radius: var(--ds-radius-detail); }


.odl-approval-panel { box-sizing: border-box; inline-size: 100%; max-inline-size: 52rem; margin-inline: auto; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-approval-panel .odl-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); }
.odl-approval-panel *, .odl-approval-panel *::before { box-sizing: border-box; }
.odl-approval-panel .odl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm); }
.odl-approval-panel .odl-vendor { margin: 0; font: var(--ds-text-title-sm); }
.odl-approval-panel .odl-badge { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8); white-space: nowrap;
  border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-approval-panel .odl-amount { margin: 0; font: var(--ds-text-headline-sm); font-variant-numeric: tabular-nums; }
.odl-approval-panel .odl-amount span { color: var(--ds-color-text-tertiary); }
.odl-approval-panel .odl-amount small { margin-inline-start: var(--ds-space-4); color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); }
.odl-approval-panel .odl-due { margin: var(--ds-space-4) 0 0; color: var(--ds-color-text-secondary); }
.odl-approval-panel .odl-policy { display: flex; gap: var(--ds-space-inline-sm); margin: 0; padding: var(--ds-space-inset-sm) var(--ds-space-inset-md);
  border-radius: var(--ds-radius-nested); background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-primary); font: var(--ds-text-body-sm); }
.odl-approval-panel .odl-policy svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); margin-block-start: var(--ds-space-2); color: var(--ds-color-text-warning); }
.odl-approval-panel .odl-label { margin: 0 0 var(--ds-space-stack-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-approval-panel ol { list-style: none; margin: 0; padding: 0; display: grid; }
.odl-approval-panel li { position: relative; display: grid; grid-template-columns: var(--ds-size-icon-md) minmax(0, 1fr) auto; gap: var(--ds-space-inline-sm); align-items: start; padding-block-end: var(--ds-space-stack-md); }
.odl-approval-panel li:last-child { padding-block-end: 0; }
.odl-approval-panel li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(var(--ds-size-icon-md) / 2 - var(--ds-border-width-emphasis) / 2);
  inset-block: var(--ds-size-icon-md) 0; inline-size: var(--ds-border-width-emphasis); background: var(--ds-color-border-subtle); }
.odl-approval-panel li.is-done:not(:last-child)::before { background: var(--ds-color-bg-action-primary); }
.odl-approval-panel li time, .odl-approval-panel li .odl-when { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-approval-panel .odl-dot { position: relative; z-index: 1; background: var(--ds-color-surface-raised); inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); border-radius: var(--ds-radius-full); display: grid; place-items: center;
  border: var(--ds-border-width-emphasis) solid var(--ds-color-border-default); color: var(--ds-color-icon-on-accent); }
.odl-approval-panel .is-done .odl-dot { background: var(--ds-color-bg-action-primary); border-color: var(--ds-color-bg-action-primary); }
.odl-approval-panel .is-now .odl-dot { border-color: var(--ds-color-bg-action-primary); }
.odl-approval-panel .is-now .odl-dot::after { content: ""; inline-size: 50%; block-size: 50%; border-radius: var(--ds-radius-full); background: var(--ds-color-bg-action-primary); }
.odl-approval-panel .odl-dot svg { inline-size: 80%; block-size: 80%; }
.odl-approval-panel .is-next { color: var(--ds-color-text-secondary); }
.odl-approval-panel dl { margin: 0; display: grid; gap: var(--ds-space-stack-xs); font-variant-numeric: tabular-nums; }
.odl-approval-panel dl div { display: flex; justify-content: space-between; gap: var(--ds-space-inline-md); }
.odl-approval-panel dt { color: var(--ds-color-text-secondary); }
.odl-approval-panel dd { margin: 0; text-align: end; white-space: nowrap; }
.odl-approval-panel .odl-total { margin-block-start: var(--ds-space-stack-xs); padding-block-start: var(--ds-space-stack-sm); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  font-weight: var(--ds-font-weight-heading); }
.odl-approval-panel .odl-total dt { color: var(--ds-color-text-primary); }
.odl-approval-panel .odl-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-inline-sm);
  padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-approval-panel .odl-main, .odl-approval-panel .odl-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-lg); align-content: start; }
.odl-approval-panel button { justify-content: center; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg);
  font-weight: var(--ds-font-weight-label); cursor: pointer; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs);
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-approval-panel .odl-reject { background: transparent; color: var(--ds-color-text-danger); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-approval-panel .odl-reject:hover { background: var(--ds-color-bg-danger-subtle); }
.odl-approval-panel .odl-approve { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: 0; }
.odl-approval-panel .odl-approve:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-approval-panel .odl-approve:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-approval-panel button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-approval-panel button svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
/* Wide: the decision on the left, the money and the buttons in a quiet column on the right. */
@container (min-width: 40rem) {
  .odl-approval-panel .odl-card { grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 0.8fr); column-gap: var(--ds-space-inset-xl); padding: var(--ds-space-inset-xl); }
  .odl-approval-panel .odl-head { grid-column: 1 / -1; }
  .odl-approval-panel .odl-side { padding: var(--ds-space-inset-lg); border-radius: var(--ds-radius-nested); background: var(--ds-color-surface-sunken); }
  .odl-approval-panel .odl-actions { padding-block-start: 0; border: 0; flex-direction: column-reverse; align-items: stretch; }
}
/* Narrow: Approve takes the width; Reject stays a clear second choice. */
@container (max-width: 24rem) {
  .odl-approval-panel .odl-card { padding: var(--ds-space-inset-md); }
  .odl-approval-panel .odl-approve { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .odl-approval-panel, .odl-approval-panel *, .odl-approval-panel *::before { transition: none !important; animation: none !important; } }


.odl-audit-log { box-sizing: border-box; inline-size: 100%; max-inline-size: 1040px; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); overflow: hidden; text-wrap: pretty; }
.odl-audit-log header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-audit-log h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-audit-log .odl-filters { display: flex; gap: var(--ds-space-4); padding: var(--ds-space-2); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-sunken); }
.odl-audit-log .odl-filters label { position: relative; }
.odl-audit-log .odl-filters input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.odl-audit-log .odl-filters span { display: grid; place-items: center; min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control-sm);
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); white-space: nowrap; }
.odl-audit-log .odl-filters input:checked + span { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); }
.odl-audit-log .odl-filters input:focus-visible + span { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-audit-log ol { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.odl-audit-log li { display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr) auto; grid-template-areas: "who what time" ". meta meta"; gap: var(--ds-space-2) var(--ds-space-inline-sm);
  align-items: start; padding: var(--ds-space-inset-sm) var(--ds-space-inset-lg); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-audit-log li:last-child { border-block-end: 0; }
.odl-audit-log .odl-who { grid-area: who; margin-block-start: calc((1lh - var(--ds-size-control-sm)) / 2); inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); display: grid; place-items: center; border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); }
.odl-audit-log .odl-who.is-bot { border-radius: var(--ds-radius-nested); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-audit-log p { grid-area: what; margin: 0; min-inline-size: 0; }
.odl-audit-log p strong { font-weight: var(--ds-font-weight-label); }
.odl-audit-log code { font: var(--ds-text-code-sm); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-detail); background: var(--ds-color-surface-sunken); white-space: nowrap; }
.odl-audit-log .odl-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-inline-md); color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-audit-log .odl-meta .odl-ip { font: var(--ds-text-code-sm); font-variant-numeric: tabular-nums; }
.odl-audit-log time { grid-area: time; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); line-height: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.odl-audit-log .odl-sev { display: inline-block; margin-inline-end: var(--ds-space-6); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-control-sm); font: var(--ds-text-label-sm);
  letter-spacing: var(--ds-text-label-sm-tracking); vertical-align: 0.1em; }
.odl-audit-log .is-high { background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); }
.odl-audit-log .is-med { background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); }
@container (min-width: 50rem) {
  .odl-audit-log li { grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr) minmax(0, 16rem) 4rem; grid-template-areas: "who what meta time"; column-gap: var(--ds-space-inline-md); }
  .odl-audit-log .odl-meta { flex-direction: column; padding-block-start: var(--ds-space-2); }
}
.odl-audit-log:has(input[value="high"]:checked) li:not(:has(.is-high)) { display: none; }


.odl-calendar-agenda { box-sizing: border-box; inline-size: 100%; max-inline-size: 480px; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised);
  font: var(--ds-text-body-md); text-wrap: pretty; container-type: inline-size; overflow: hidden; }
.odl-calendar-agenda *, .odl-calendar-agenda *::before { box-sizing: border-box; }
.odl-calendar-agenda svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-calendar-agenda .odl-head { display: flex; align-items: center; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-md);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-calendar-agenda .odl-date { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--ds-space-inline-sm); }
.odl-calendar-agenda .odl-day-num { flex: none; display: grid; place-items: center; inline-size: var(--ds-size-control-md); block-size: var(--ds-size-control-md); border-radius: max(0px, calc(var(--ds-radius-container) - var(--ds-space-inset-md)));
  background: var(--ds-color-bg-accent-bold); color: var(--ds-color-text-on-accent); font: var(--ds-text-title-sm); font-variant-numeric: tabular-nums; }
.odl-calendar-agenda h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-calendar-agenda .odl-date p { margin: var(--ds-space-2) 0 0; text-wrap: balance; color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-calendar-agenda .odl-nav { display: flex; align-items: center; border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-control); overflow: hidden; }
.odl-calendar-agenda .odl-nav button { display: inline-grid; place-items: center; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-xs); border: 0; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-calendar-agenda .odl-nav button + button { border-inline-start: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-calendar-agenda .odl-nav button:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-calendar-agenda button:focus-visible, .odl-calendar-agenda a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
.odl-calendar-agenda .odl-allday { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-xs) var(--ds-space-inset-md) var(--ds-space-inset-xs) 0;
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-sunken); }
.odl-calendar-agenda .odl-allday > span { color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); text-align: end; }
.odl-calendar-agenda .odl-body { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--ds-space-inline-sm); padding: var(--ds-space-16) var(--ds-space-inset-md) var(--ds-space-16) 0; }
.odl-calendar-agenda .odl-rail, .odl-calendar-agenda .odl-grid { display: grid; grid-template-rows: repeat(24, var(--ds-space-20)); }
.odl-calendar-agenda .odl-rail { margin: 0; padding: 0; list-style: none; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; text-align: end; }
.odl-calendar-agenda .odl-rail li { grid-column: 1; align-self: start; block-size: 0; display: flex; align-items: center; justify-content: flex-end; }
.odl-calendar-agenda .odl-rail li:last-child { align-self: end; }
.odl-calendar-agenda .odl-grid { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-4); }
.odl-calendar-agenda .odl-line { grid-column: 1 / -1; border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-calendar-agenda .odl-line:last-of-type { border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-calendar-agenda .odl-event { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; min-block-size: var(--ds-size-target-min); margin-block: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-inset-xs) var(--ds-space-4) var(--ds-space-inset-sm); border-radius: var(--ds-radius-detail);
  border-inline-start: var(--ds-border-width-selected) solid var(--ds-color-border-accent); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-primary); text-decoration: none;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-calendar-agenda .odl-event:hover { background: var(--ds-color-bg-accent-subtle-hover); }
.odl-calendar-agenda .odl-event.is-info { border-inline-start-color: var(--ds-color-border-info); background: var(--ds-color-bg-info-subtle); }
.odl-calendar-agenda .odl-event.is-warn { border-inline-start-color: var(--ds-color-border-warning); background: var(--ds-color-bg-warning-subtle); }
.odl-calendar-agenda .odl-event.is-neutral { border-inline-start-color: var(--ds-color-border-strong); background: var(--ds-color-bg-neutral-subtle); }
.odl-calendar-agenda .odl-event.is-past { background: var(--ds-color-surface-sunken); }
.odl-calendar-agenda .odl-event.is-past strong { color: var(--ds-color-text-secondary); }
.odl-calendar-agenda .odl-event strong { font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-heading); text-wrap: balance; }
.odl-calendar-agenda .odl-event span { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-calendar-agenda .odl-allday .odl-event { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-2) var(--ds-space-inline-sm); }
.odl-calendar-agenda .odl-now { position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 46.67%; border-block-start: var(--ds-border-width-emphasis) solid var(--ds-color-border-danger); pointer-events: none; }
.odl-calendar-agenda .odl-now::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--ds-space-4)); inset-block-start: calc(-1 * var(--ds-space-4) - var(--ds-border-width-emphasis) / 2);
  inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-danger-bold); }
.odl-calendar-agenda .odl-now span { position: absolute; inset-inline-end: 0; inset-block-end: var(--ds-space-2); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-detail);
  background: var(--ds-color-bg-danger-bold); color: var(--ds-color-text-on-danger); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
@container (max-width: 400px) { .odl-calendar-agenda .odl-day-num { display: none; } }
@container (max-width: 300px) { .odl-calendar-agenda .odl-date p { display: none; } }
@container (max-width: 440px) {
  .odl-calendar-agenda .odl-rail, .odl-calendar-agenda .odl-grid { grid-template-rows: repeat(24, var(--ds-space-24)); }
  .odl-calendar-agenda .odl-allday, .odl-calendar-agenda .odl-body { grid-template-columns: 3rem minmax(0, 1fr); }
  .odl-calendar-agenda .odl-body { padding-inline-end: var(--ds-space-inset-sm); }
  .odl-calendar-agenda .odl-event.is-half { padding-inline: var(--ds-space-inset-xs) var(--ds-space-4); }
  .odl-calendar-agenda .odl-event.is-half strong { font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
  .odl-calendar-agenda .odl-event.is-half .odl-place { display: none; }
}
@media (prefers-reduced-motion: reduce) { .odl-calendar-agenda, .odl-calendar-agenda *, .odl-calendar-agenda *::before { transition: none !important; animation: none !important; } }


.odl-comment-thread { box-sizing: border-box; inline-size: 100%; max-inline-size: 36rem; margin-inline: auto; display: grid; gap: var(--ds-space-stack-md); padding: var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; container-type: inline-size; }
.odl-comment-thread *, .odl-comment-thread *::before { box-sizing: border-box; }
.odl-comment-thread svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-comment-thread .odl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-inline-sm); }
.odl-comment-thread h3 { margin: 0; display: flex; align-items: baseline; gap: var(--ds-space-inline-sm); font: var(--ds-text-title-sm); }
.odl-comment-thread h3 span, .odl-comment-thread .odl-head p { margin: 0; color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-comment-thread ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-stack-md); }
.odl-comment-thread .odl-comment { display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr); gap: var(--ds-space-inline-sm); }
.odl-comment-thread .odl-avatar { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
.odl-comment-thread .odl-avatar.is-b { background: var(--ds-color-bg-info-subtle); color: var(--ds-color-text-info); }
.odl-comment-thread .odl-avatar.is-c { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); }
.odl-comment-thread .odl-body { min-inline-size: 0; display: grid; gap: var(--ds-space-4); }
.odl-comment-thread .odl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ds-space-inline-sm); min-block-size: var(--ds-size-control-sm); align-content: center; }
.odl-comment-thread .odl-meta strong { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-comment-thread .odl-meta strong, .odl-comment-thread .odl-when { white-space: nowrap; }
.odl-comment-thread .odl-meta time, .odl-comment-thread .odl-edited { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-comment-thread .odl-body > p { margin: 0; }
.odl-comment-thread .odl-mention { padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-detail); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font-weight: var(--ds-font-weight-label); }
.odl-comment-thread .odl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs); margin-block-start: var(--ds-space-2); }
.odl-comment-thread button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-4); min-block-size: var(--ds-size-target-min); min-inline-size: var(--ds-size-target-min);
  padding: 0 var(--ds-space-inset-xs); border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary);
  font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-comment-thread button:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-comment-thread button:focus-visible, .odl-comment-thread textarea:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-comment-thread .odl-reaction { min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-xs); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-full); }
.odl-comment-thread .odl-reaction[aria-pressed="true"] { border-color: var(--ds-color-border-accent); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-comment-thread .odl-replies { margin-block-start: var(--ds-space-stack-sm); padding: var(--ds-space-inset-sm); border-radius: var(--ds-radius-nested); background: var(--ds-color-surface-sunken);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-comment-thread .odl-resolved { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0 0 var(--ds-space-stack-sm); color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-comment-thread .odl-replies .odl-comment { grid-template-columns: var(--ds-size-icon-lg) minmax(0, 1fr); }
.odl-comment-thread .odl-replies .odl-avatar { inline-size: var(--ds-size-icon-lg); block-size: var(--ds-size-icon-lg); }
.odl-comment-thread .odl-replies .odl-meta { min-block-size: var(--ds-size-icon-lg); }
.odl-comment-thread .is-resolved .odl-body > p { color: var(--ds-color-text-secondary); }
.odl-comment-thread form { display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr); gap: var(--ds-space-inline-sm); padding-block-start: var(--ds-space-stack-md);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-comment-thread .odl-box { display: grid; min-inline-size: 0; border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-nested); background: var(--ds-color-bg-field); }
.odl-comment-thread .odl-box:focus-within { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-comment-thread textarea { resize: none; field-sizing: content; min-block-size: var(--ds-size-row-two-line); max-block-size: 12rem; padding: var(--ds-space-inset-xs) var(--ds-space-inset-sm); border: 0; background: transparent;
  color: var(--ds-color-text-primary); font: var(--ds-text-body-md); outline: none; }
.odl-comment-thread textarea::placeholder { color: var(--ds-color-text-tertiary); }
.odl-comment-thread .odl-bar { display: flex; align-items: center; gap: var(--ds-space-inline-xs); padding: 0 var(--ds-space-4) var(--ds-space-4) var(--ds-space-4); }
.odl-comment-thread .odl-bar .odl-spacer { flex: 1; }
.odl-comment-thread .odl-bar small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-comment-thread .odl-send { min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-sm); background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); }
.odl-comment-thread .odl-send:hover { background: var(--ds-color-bg-action-primary-hover); color: var(--ds-color-text-on-action); }
.odl-comment-thread .odl-send:disabled { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: not-allowed; }
@container (max-width: 400px) { .odl-comment-thread .odl-bar small { display: none; } }
/* Phone: the composer takes the full width (the avatar beside it only repeats who you are). */
@container (max-width: 26rem) {
  .odl-comment-thread form { grid-template-columns: minmax(0, 1fr); }
  .odl-comment-thread form > .odl-avatar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .odl-comment-thread, .odl-comment-thread *, .odl-comment-thread *::before { transition: none !important; animation: none !important; } }


.odl-kanban-column { box-sizing: border-box; inline-size: 100%; max-inline-size: 22rem; margin-inline: auto; display: grid; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-sm);
  background: var(--ds-color-surface-sunken); color: var(--ds-color-text-primary); border-radius: var(--ds-radius-container); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-kanban-column *, .odl-kanban-column *::before { box-sizing: border-box; }
.odl-kanban-column svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-kanban-column .odl-head { display: flex; align-items: center; gap: var(--ds-space-inline-xs); padding-inline-start: var(--ds-space-inset-sm); }
.odl-kanban-column .odl-head h3 { margin-inline-start: var(--ds-space-4); }
.odl-kanban-column .odl-top { display: grid; gap: var(--ds-space-2); }
.odl-kanban-column .odl-status { inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-warning-bold); flex: none; }
.odl-kanban-column h3 { flex: 1; margin: 0; display: flex; align-items: center; gap: var(--ds-space-inline-xs); font: var(--ds-text-title-sm); }
.odl-kanban-column h3 > span { min-inline-size: var(--ds-space-20); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle);
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; text-align: center; }
.odl-kanban-column .odl-icon-btn { display: inline-grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-icon-subtle); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-kanban-column .odl-icon-btn:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-icon-default); }
.odl-kanban-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-stack-sm); }
.odl-kanban-column .odl-card { position: relative; display: grid; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-sm) var(--ds-space-inset-md);
  background: var(--ds-color-surface-raised); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-nested);
  box-shadow: var(--ds-elevation-raised); cursor: grab;
  transition: box-shadow var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-kanban-column .odl-card:hover { border-color: var(--ds-color-border-default); }
.odl-kanban-column .odl-card:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-kanban-column .odl-id { color: var(--ds-color-text-tertiary); font: var(--ds-text-code-sm); }
.odl-kanban-column .odl-title { margin: 0; font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-kanban-column .odl-labels { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); margin: 0; padding: 0; }
.odl-kanban-column .odl-tag { display: inline-flex; align-items: center; gap: var(--ds-space-4); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-detail);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); white-space: nowrap; }
.odl-kanban-column .odl-tag::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: currentColor; }
.odl-kanban-column .odl-tag.is-bug::before { background: var(--ds-color-bg-danger-bold); }
.odl-kanban-column .odl-tag.is-billing::before { background: var(--ds-color-bg-accent-bold); }
.odl-kanban-column .odl-tag.is-api::before { background: var(--ds-color-bg-info-bold); }
.odl-kanban-column .odl-tag.is-design::before { background: var(--ds-color-bg-warning-bold); }
.odl-kanban-column .odl-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ds-space-inline-sm); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-kanban-column .odl-bar { block-size: var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-kanban-column .odl-bar span { display: block; block-size: 100%; border-radius: inherit; background: var(--ds-color-bg-action-primary); }
.odl-kanban-column .odl-foot { display: flex; align-items: center; gap: var(--ds-space-inline-sm); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-kanban-column .odl-foot > span, .odl-kanban-column .odl-foot time { display: inline-flex; align-items: center; gap: var(--ds-space-4); white-space: nowrap; }
.odl-kanban-column .odl-foot .odl-spacer { flex: 1; }
.odl-kanban-column .is-overdue { padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-detail); background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); }
.odl-kanban-column .odl-avatar { display: inline-grid; place-items: center; inline-size: var(--ds-size-icon-lg); block-size: var(--ds-size-icon-lg); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
.odl-kanban-column .odl-avatar.is-b { background: var(--ds-color-bg-info-subtle); color: var(--ds-color-text-info); }
.odl-kanban-column .odl-avatar.is-c { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); }
.odl-kanban-column .odl-card.is-dragging { cursor: grabbing; transform: translateY(calc(-1 * var(--ds-space-4))); border-color: var(--ds-color-border-accent);
  box-shadow: var(--ds-elevation-overlay); z-index: 1; }
.odl-kanban-column .odl-slot { block-size: var(--ds-size-control-lg); border: var(--ds-border-width-emphasis) dashed var(--ds-color-border-default); border-radius: var(--ds-radius-nested);
  background: var(--ds-color-bg-neutral-subtle); }
.odl-kanban-column .odl-add { display: flex; align-items: center; gap: var(--ds-space-inline-xs); inline-size: 100%; min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-xs);
  border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-kanban-column .odl-add:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-kanban-column button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-kanban-column .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .odl-kanban-column, .odl-kanban-column *, .odl-kanban-column *::before { transition: none !important; animation: none !important; } }


.odl-member-list { box-sizing: border-box; inline-size: 100%; max-inline-size: 760px; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised);
  font: var(--ds-text-body-md); text-wrap: pretty; container-type: inline-size; overflow: hidden; }
.odl-member-list *, .odl-member-list *::before { box-sizing: border-box; }
.odl-member-list svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-member-list .odl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-stack-sm) var(--ds-space-inline-md);
  padding: var(--ds-space-inset-md) var(--ds-space-inset-lg); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-member-list h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-member-list .odl-head p { margin: var(--ds-space-2) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-member-list button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); min-block-size: var(--ds-size-control-md); min-inline-size: var(--ds-size-target-min);
  padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; white-space: nowrap;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-member-list .odl-invite { border: 0; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-member-list .odl-invite:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-member-list .odl-quiet { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); min-block-size: var(--ds-size-control-sm); }
.odl-member-list .odl-quiet:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-member-list button:focus-visible, .odl-member-list select:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-member-list .odl-cols, .odl-member-list li { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 7rem; align-items: center; gap: var(--ds-space-inline-md);
  padding: 0 var(--ds-space-inset-lg); }
.odl-member-list .odl-cols { min-block-size: var(--ds-size-row-sm); background: var(--ds-color-surface-sunken); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-member-list .odl-cols span:last-child, .odl-member-list .odl-when { text-align: end; }
.odl-member-list ul { list-style: none; margin: 0; padding: 0; }
.odl-member-list li { min-block-size: var(--ds-size-row-two-line); padding-block: var(--ds-space-inset-xs); }
.odl-member-list li + li { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-member-list li:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-member-list .odl-who { display: flex; align-items: center; gap: var(--ds-space-inline-sm); min-inline-size: 0; }
.odl-member-list .odl-avatar { flex: none; display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
.odl-member-list .odl-avatar.is-b { background: var(--ds-color-bg-info-subtle); color: var(--ds-color-text-info); }
.odl-member-list .odl-avatar.is-c { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); }
.odl-member-list .odl-avatar.is-pending { background: transparent; color: var(--ds-color-icon-subtle); border: var(--ds-border-width-default) dashed var(--ds-color-border-strong); }
.odl-member-list .odl-name { min-inline-size: 0; display: grid; }
.odl-member-list .odl-name strong { display: flex; flex-wrap: wrap; min-inline-size: 0; align-items: center; gap: var(--ds-space-inline-xs); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-member-list .odl-name > span { min-inline-size: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); overflow-wrap: anywhere; }
.odl-member-list .is-pending-row .odl-name > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-inline-xs); overflow-wrap: normal; }
.odl-member-list .odl-mail { min-inline-size: 0; overflow-wrap: anywhere; }
.odl-member-list .odl-you, .odl-member-list .odl-pill { flex: none; }
.odl-member-list .odl-you { padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-detail); background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); }
.odl-member-list .odl-pill { padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-detail); background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); font: var(--ds-text-label-sm); }
.odl-member-list .odl-role { position: relative; display: flex; align-items: center; }
.odl-member-list select { appearance: none; inline-size: 100%; min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-32) 0 var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field); color: var(--ds-color-text-primary);
  font: var(--ds-text-body-md); cursor: pointer; }
.odl-member-list select:hover { border-color: var(--ds-color-border-strong); }
.odl-member-list .odl-role > svg { position: absolute; inset-inline-end: var(--ds-space-inset-sm); pointer-events: none; color: var(--ds-color-icon-subtle); }
.odl-member-list .odl-locked { display: flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm); color: var(--ds-color-text-secondary); }
.odl-member-list .odl-locked svg { color: var(--ds-color-icon-subtle); }
.odl-member-list .odl-when { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-member-list .odl-when .is-online { color: var(--ds-color-text-success); }
.odl-member-list .is-pending-row .odl-when { display: flex; justify-content: flex-end; }
@container (max-width: 600px) {
  .odl-member-list .odl-cols { display: none; }
  .odl-member-list li { grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: "who who" "role when"; row-gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-sm) var(--ds-space-inset-md); }
  .odl-member-list .odl-head { padding: var(--ds-space-inset-md); }
  .odl-member-list .odl-long { display: none; }
  .odl-member-list .odl-who { grid-area: who; }
  .odl-member-list .odl-role, .odl-member-list .odl-locked { grid-area: role; margin-inline-start: calc(var(--ds-size-control-sm) + var(--ds-space-inline-sm)); }
  .odl-member-list .odl-locked { padding-inline-start: 0; }
  .odl-member-list .odl-when { grid-area: when; }
}
@media (prefers-reduced-motion: reduce) { .odl-member-list, .odl-member-list *, .odl-member-list *::before { transition: none !important; animation: none !important; } }


.odl-notification-inbox { box-sizing: border-box; inline-size: 100%; max-inline-size: 440px; background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-overlay);
  font: var(--ds-text-body-md); text-wrap: pretty; container-type: inline-size; overflow: hidden; }
.odl-notification-inbox *, .odl-notification-inbox *::before { box-sizing: border-box; }
.odl-notification-inbox svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-notification-inbox .odl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm) 0 var(--ds-space-inset-md); }
.odl-notification-inbox h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-notification-inbox button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); min-block-size: var(--ds-size-target-min); min-inline-size: var(--ds-size-target-min);
  padding: 0 var(--ds-space-inset-sm); border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary);
  font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; white-space: nowrap;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-notification-inbox button:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-notification-inbox button:focus-visible, .odl-notification-inbox .odl-row:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
.odl-notification-inbox [role="tablist"] { display: flex; gap: var(--ds-space-inline-xs); padding: 0 var(--ds-space-inset-sm); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-notification-inbox [role="tab"] { position: relative; border-radius: var(--ds-radius-control) var(--ds-radius-control) 0 0; color: var(--ds-color-text-secondary); }
.odl-notification-inbox [role="tab"][aria-selected="true"] { color: var(--ds-color-text-primary); }
.odl-notification-inbox [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--ds-space-inset-sm); inset-block-end: calc(-1 * var(--ds-border-width-default));
  border-block-end: var(--ds-border-width-selected) solid var(--ds-color-border-accent); }
.odl-notification-inbox .odl-badge { min-inline-size: var(--ds-space-20); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-accent-bold);
  color: var(--ds-color-text-on-accent); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; text-align: center; }
.odl-notification-inbox .odl-group { margin: 0; padding: var(--ds-space-inset-sm) var(--ds-space-inset-md) var(--ds-space-4); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-notification-inbox ul { list-style: none; margin: 0; padding: 0 0 var(--ds-space-inset-xs); }
.odl-notification-inbox .odl-row { position: relative; display: grid; grid-template-columns: var(--ds-space-8) var(--ds-size-control-sm) minmax(0, 1fr); gap: var(--ds-space-inline-sm);
  padding: var(--ds-space-inset-sm) var(--ds-space-inset-md) var(--ds-space-inset-sm) var(--ds-space-inset-sm); cursor: pointer; }
.odl-notification-inbox .odl-row:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-notification-inbox .odl-dot { align-self: start; margin-block-start: calc((var(--ds-size-control-sm) - var(--ds-space-8)) / 2); inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); }
.odl-notification-inbox .is-unread .odl-dot { background: var(--ds-color-bg-accent-bold); }
.odl-notification-inbox .odl-avatar { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
.odl-notification-inbox .odl-avatar.is-b { background: var(--ds-color-bg-info-subtle); color: var(--ds-color-text-info); }
.odl-notification-inbox .odl-avatar.is-c { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); }
.odl-notification-inbox .odl-avatar.is-sys { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-icon-subtle); }
.odl-notification-inbox .odl-body { min-inline-size: 0; display: grid; gap: var(--ds-space-2); }
.odl-notification-inbox .odl-line { margin: 0; color: var(--ds-color-text-secondary); }
.odl-notification-inbox .odl-line strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-notification-inbox .is-unread .odl-line { color: var(--ds-color-text-primary); }
.odl-notification-inbox .odl-meta { display: block; color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-notification-inbox .odl-meta > * + *::before { content: "\00a0\00b7\0020"; }
.odl-notification-inbox .odl-quote { margin: var(--ds-space-4) 0 0; padding-inline-start: var(--ds-space-inset-sm); border-inline-start: var(--ds-border-width-emphasis) solid var(--ds-color-border-default);
  color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-notification-inbox .odl-actions { display: flex; gap: var(--ds-space-inline-xs); margin-block-start: var(--ds-space-4); }
.odl-notification-inbox .odl-actions button { min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-sm); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label);
  border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-notification-inbox .odl-actions .odl-primary { border-color: transparent; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-notification-inbox .odl-actions .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); color: var(--ds-color-text-on-action); }
.odl-notification-inbox .odl-done { display: inline-flex; align-items: center; gap: var(--ds-space-4); color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-notification-inbox [hidden] { display: none; }
.odl-notification-inbox .odl-foot { display: flex; justify-content: center; border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); padding: var(--ds-space-inset-xs); }
.odl-notification-inbox .odl-foot button { color: var(--ds-color-text-link); }
@media (prefers-reduced-motion: reduce) { .odl-notification-inbox, .odl-notification-inbox *, .odl-notification-inbox *::before { transition: none !important; animation: none !important; } }


.odl-budget-meters { box-sizing: border-box; inline-size: 100%; max-inline-size: 1120px; container-type: inline-size; text-wrap: pretty; }
.odl-budget-meters .odl-grid { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-budget-meters section { min-inline-size: 0; display: grid; gap: var(--ds-space-stack-xs); align-content: start; }
.odl-budget-meters section + section { margin-block-start: var(--ds-space-stack-md); padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-budget-meters .odl-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: flex-start; gap: var(--ds-space-4) var(--ds-space-inline-sm); min-block-size: var(--ds-size-control-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); }
.odl-budget-meters .odl-top span:last-child { font-variant-numeric: tabular-nums; }
.odl-budget-meters .odl-top b { display: inline-flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm);
  background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); white-space: nowrap; font-variant-numeric: tabular-nums; }
.odl-budget-meters h4 { margin: 0; font: var(--ds-text-body-md); font-variant-numeric: tabular-nums; }
.odl-budget-meters h4 strong { font: var(--ds-text-title-md); }
.odl-budget-meters .odl-bar { position: relative; block-size: var(--ds-space-8); margin-block: var(--ds-space-4); border-radius: var(--ds-radius-full);
  background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-budget-meters .odl-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--odl-used); background: var(--ds-color-bg-inverse); border-radius: inherit; }
.odl-budget-meters .odl-bar .odl-forecast { inline-size: var(--odl-forecast); background: repeating-linear-gradient(135deg, var(--ds-color-border-strong) 0 2px, transparent 2px 6px); }
.odl-budget-meters .odl-bar .odl-full { background: var(--ds-color-bg-action-primary); }
.odl-budget-meters .odl-bar u { position: absolute; inset-block: 0; inset-inline-start: var(--odl-at); inline-size: var(--ds-border-width-emphasis); background: var(--ds-color-surface-raised); }
.odl-budget-meters p { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
@container (min-width: 46rem) { .odl-budget-meters .odl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ds-space-inset-lg); row-gap: 0; }
  .odl-budget-meters section { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--ds-space-stack-xs); }
  .odl-budget-meters section + section { margin-block-start: 0; padding-block-start: 0; padding-inline-start: var(--ds-space-inset-lg);
    border-block-start: 0; border-inline-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); } }


.odl-bar-chart { box-sizing: border-box; inline-size: 100%; max-inline-size: 60rem; margin-inline: auto; container-type: inline-size; text-wrap: pretty; }
.odl-bar-chart *, .odl-bar-chart *::before, .odl-bar-chart *::after { box-sizing: border-box; }
.odl-bar-chart .odl-card { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-bar-chart .odl-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--ds-space-stack-sm) var(--ds-space-inline-md); }
.odl-bar-chart h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-bar-chart .odl-sub { margin: var(--ds-space-2) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-bar-chart .odl-stats { display: flex; gap: var(--ds-space-inline-md); margin: 0; font-variant-numeric: tabular-nums; }
.odl-bar-chart .odl-stats div { display: grid; gap: var(--ds-space-2); }
.odl-bar-chart .odl-stats dt { color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); white-space: nowrap; }
.odl-bar-chart .odl-stats dd { margin: 0; font: var(--ds-text-numeric-md); white-space: nowrap; }
.odl-bar-chart .odl-over { display: inline-block; margin-inline-start: var(--ds-space-4); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-full); vertical-align: middle;
  background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); font: var(--ds-text-label-sm); }

.odl-bar-chart .odl-chart { padding-block-start: var(--ds-space-8); display: grid; grid-template-columns: 4.5ch minmax(0, 1fr); column-gap: var(--ds-space-8); row-gap: var(--ds-space-6); }
.odl-bar-chart .odl-axis, .odl-bar-chart .odl-plot { position: relative; block-size: 13.5rem; }
.odl-bar-chart .odl-axis span { position: absolute; inset-inline-end: 0; inset-block-end: calc(var(--y) * 1%); transform: translateY(50%);
  color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-bar-chart .odl-grid { position: absolute; inset-inline: 0; inset-block-end: calc(var(--y) * 1%); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-bar-chart .odl-grid.is-base { border-block-start-color: var(--ds-color-border-strong); }
.odl-bar-chart .odl-budget { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 60%; border-block-start: var(--ds-border-width-emphasis) dashed var(--ds-color-text-secondary); pointer-events: none; }
.odl-bar-chart .odl-budget span { position: absolute; inset-inline-start: 0; inset-block-end: var(--ds-space-2); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-4);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.odl-bar-chart .odl-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-space-4); }
.odl-bar-chart .odl-col { position: relative; display: flex; align-items: end; justify-content: center; min-inline-size: var(--ds-size-target-min); block-size: 100%; margin: 0; padding: 0;
  border: 0; border-radius: var(--ds-radius-4); background: transparent; color: inherit; cursor: pointer; }
.odl-bar-chart .odl-col:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-bar-chart .odl-bar { display: flex; flex-direction: column-reverse; inline-size: 56%; max-inline-size: 2.75rem; block-size: calc(var(--v) * 1%);
  transition: opacity var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-bar-chart .odl-actual { flex: none; block-size: calc(var(--a, 100) * 1%); background: var(--ds-color-bg-accent-bold); border-radius: var(--ds-radius-4) var(--ds-radius-4) 0 0; }
.odl-bar-chart .odl-fc + .odl-actual, .odl-bar-chart .odl-actual:not(:last-child) { border-radius: 0; }
.odl-bar-chart .odl-fc { flex: 1; border: var(--ds-border-width-default) solid var(--ds-color-border-accent); border-block-end: 0; border-radius: var(--ds-radius-4) var(--ds-radius-4) 0 0;
  background: repeating-linear-gradient(135deg, var(--ds-color-border-accent) 0 1.5px, transparent 1.5px 5px), var(--ds-color-bg-accent-subtle); }
.odl-bar-chart .odl-cols:hover .odl-col:not(:hover) .odl-bar, .odl-bar-chart .odl-cols:has(.odl-col:focus-visible) .odl-col:not(:focus-visible) .odl-bar { opacity: 0.4; }

.odl-bar-chart .odl-tip { position: absolute; z-index: 2; inset-block-end: calc(var(--v) * 1%); inline-size: max-content; min-inline-size: 10.5rem; display: grid; gap: var(--ds-space-2);
  padding: var(--ds-space-inset-sm) var(--ds-space-inset-md); border-radius: var(--ds-radius-container); background: var(--ds-color-bg-inverse); color: var(--ds-color-text-inverse);
  box-shadow: var(--ds-elevation-floating); text-align: start; font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transform: translateY(50%); transition: opacity var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-bar-chart .odl-col:nth-child(-n+3) .odl-tip { inset-inline-start: calc(50% + var(--ds-space-24)); }
.odl-bar-chart .odl-col:nth-child(n+4) .odl-tip { inset-inline-end: calc(50% + var(--ds-space-24)); }
.odl-bar-chart .odl-tip b { font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-heading); }
.odl-bar-chart .odl-tip span { display: flex; justify-content: space-between; gap: var(--ds-space-inline-md); }
.odl-bar-chart .odl-tip i { font-style: normal; opacity: 0.72; }
/* The tip shows on hover or keyboard focus only: at rest it would cover the bar beside it, and the header already states the month so far. */
.odl-bar-chart .odl-col:hover .odl-tip, .odl-bar-chart .odl-col:focus-visible .odl-tip { opacity: 1; }

.odl-bar-chart .odl-x { grid-column: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-space-4); margin: 0; padding: 0; list-style: none;
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); text-align: center; }
.odl-bar-chart .odl-x .is-current { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-heading); }

.odl-bar-chart .odl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-stack-xs) var(--ds-space-inline-md);
  padding-block-start: var(--ds-space-stack-sm); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-bar-chart .odl-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-stack-xs) var(--ds-space-inline-md); margin: 0; padding: 0; list-style: none; }
.odl-bar-chart .odl-legend li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-bar-chart .odl-key { inline-size: var(--ds-space-12); block-size: var(--ds-space-12); border-radius: var(--ds-radius-2); }
.odl-bar-chart .odl-key.is-actual { background: var(--ds-color-bg-accent-bold); }
.odl-bar-chart .odl-key.is-fc { border: var(--ds-border-width-default) solid var(--ds-color-border-accent);
  background: repeating-linear-gradient(135deg, var(--ds-color-border-accent) 0 1.5px, transparent 1.5px 4px), var(--ds-color-bg-accent-subtle); }
.odl-bar-chart .odl-key.is-budget { block-size: 0; border-radius: 0; border-block-start: var(--ds-border-width-emphasis) dashed var(--ds-color-text-secondary); }
.odl-bar-chart .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@container (min-width: 44rem) {
  .odl-bar-chart .odl-card { padding: var(--ds-space-inset-xl); }
  .odl-bar-chart .odl-axis, .odl-bar-chart .odl-plot { block-size: 16rem; }
  .odl-bar-chart .odl-bar { inline-size: 52%; max-inline-size: 4rem; }
  .odl-bar-chart .odl-stats { gap: var(--ds-space-inset-xl); }
  .odl-bar-chart .odl-stats dd { font: var(--ds-text-numeric-lg); }
}
@container (max-width: 30rem) {
  .odl-bar-chart .odl-card { padding: var(--ds-space-inset-md); }
  .odl-bar-chart .odl-axis, .odl-bar-chart .odl-plot { block-size: 11rem; }
  .odl-bar-chart .odl-cols, .odl-bar-chart .odl-x { gap: var(--ds-space-2); }
  .odl-bar-chart .odl-tip { min-inline-size: 9rem; padding: var(--ds-space-inset-xs) var(--ds-space-inset-sm); }
  .odl-bar-chart .odl-col:nth-child(-n+3) .odl-tip { inset-inline-start: calc(50% + var(--ds-space-12)); }
  .odl-bar-chart .odl-col:nth-child(n+4) .odl-tip { inset-inline-end: calc(50% + var(--ds-space-12)); }
  .odl-bar-chart .odl-col:nth-child(3) .odl-tip { inset-inline-start: auto; inset-inline-end: calc(50% + var(--ds-space-12)); }
  /* Narrow: every tip reads out in the plot's top-left corner, so none can run past the card's edge. */
  .odl-bar-chart .odl-col { position: static; }
  .odl-bar-chart .odl-col .odl-tip, .odl-bar-chart .odl-col:nth-child(n) .odl-tip { inset-block: 0 auto; inset-inline: 0 auto; max-inline-size: 100%; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .odl-bar-chart, .odl-bar-chart *, .odl-bar-chart *::before { transition: none !important; animation: none !important; } }


.odl-service-health { box-sizing: border-box; inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; display: grid; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-service-health header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-inline-sm); }
.odl-service-health h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-service-health .odl-now { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-service-health .odl-now strong { color: var(--ds-color-text-warning); font: var(--ds-text-code-md); font-weight: var(--ds-font-weight-label); }
.odl-service-health .odl-status { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-service-health .odl-status::before { content: ""; flex: none; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-warning-bold);
  box-shadow: 0 0 0 var(--ds-space-2) var(--ds-color-bg-warning-subtle); }
.odl-service-health figure { margin: 0; }
.odl-service-health .odl-plot { position: relative; margin-block-start: var(--ds-space-24); }
.odl-service-health svg { display: block; inline-size: 100%; block-size: 8rem; overflow: visible; }
/* Labels and markers sit over the stretched chart in HTML, so they keep their shape at any width. */
.odl-service-health .odl-pin { position: absolute; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-service-health .odl-pin.is-max { inset-block-start: 0; inset-inline-start: 0; transform: translateY(-100%); padding-block-end: var(--ds-space-2); }
.odl-service-health .odl-pin.is-obj { inset-block-start: 37.5%; inset-inline-start: 0; transform: translateY(-100%); padding-block-end: var(--ds-space-2); color: var(--ds-color-text-warning); }
.odl-service-health .odl-end { position: absolute; inset-inline-start: 100%; inset-block-start: 21.67%; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); transform: translate(-50%, -50%);
  border: var(--ds-border-width-emphasis) solid var(--ds-color-text-warning); border-radius: var(--ds-radius-full); background: var(--ds-color-surface-raised);
  box-shadow: 0 0 0 var(--ds-space-2) var(--ds-color-bg-warning-subtle); }
.odl-service-health .odl-dep { position: absolute; inset-inline-start: 87.33%; inset-block-start: 0; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); transform: translate(-50%, -50%) rotate(45deg);
  border-radius: var(--ds-radius-2); background: var(--ds-color-icon-default); }
.odl-service-health .odl-grid { stroke: var(--ds-color-border-separator); }
.odl-service-health .odl-objective { stroke: var(--ds-color-text-warning); stroke-dasharray: 4 3; }
.odl-service-health .odl-prev { stroke: var(--ds-color-border-strong); stroke-dasharray: 2 3; fill: none; }
.odl-service-health .odl-line { stroke: var(--ds-color-text-primary); fill: none; stroke-linejoin: round; }
.odl-service-health .odl-hot { stroke: var(--ds-color-text-warning); }
.odl-service-health .odl-gap { fill: var(--ds-color-bg-neutral-subtle); }
.odl-service-health .odl-deploy { stroke: var(--ds-color-border-strong); stroke-dasharray: 2 3; }
.odl-service-health line, .odl-service-health path, .odl-service-health circle { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.odl-service-health .odl-axis, .odl-service-health figcaption { display: flex; justify-content: space-between; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-service-health figcaption { flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-inline-md); justify-content: start; margin-block-start: var(--ds-space-stack-xs); }
.odl-service-health figcaption span { display: inline-flex; align-items: center; gap: var(--ds-space-4); }
.odl-service-health figcaption i { display: inline-block; inline-size: var(--ds-space-12); border-block-start: var(--ds-border-width-emphasis) solid var(--ds-color-text-primary); }
.odl-service-health figcaption .odl-k-prev { border-block-start-style: dotted; border-color: var(--ds-color-border-strong); }
.odl-service-health figcaption .odl-k-obj { border-block-start-style: dashed; border-color: var(--ds-color-text-warning); }
.odl-service-health figcaption .odl-k-gap { block-size: var(--ds-space-8); border: 0; border-radius: var(--ds-radius-2); background: var(--ds-color-bg-neutral-subtle); }
.odl-service-health figcaption .odl-k-dep { inline-size: var(--ds-space-6); block-size: var(--ds-space-6); margin-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-2); background: var(--ds-color-icon-default); transform: rotate(45deg); }
.odl-service-health a { color: var(--ds-color-text-link); font: var(--ds-text-body-sm); text-underline-offset: 0.2em; white-space: nowrap; }
.odl-service-health a:hover { text-decoration-thickness: var(--ds-border-width-emphasis); }
.odl-service-health a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); border-radius: var(--ds-radius-detail); }


.odl-donut-breakdown { box-sizing: border-box; inline-size: 100%; max-inline-size: 720px; container-type: inline-size; text-wrap: pretty; }
.odl-donut-breakdown *, .odl-donut-breakdown *::before { box-sizing: border-box; }
.odl-donut-breakdown .odl-card { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-donut-breakdown .odl-head { display: grid; justify-items: start; gap: var(--ds-space-2); }
.odl-donut-breakdown h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-donut-breakdown .odl-sub { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-donut-breakdown .odl-body { display: grid; gap: var(--ds-space-stack-lg); justify-items: center; }
.odl-donut-breakdown figure { position: relative; display: grid; place-items: center; inline-size: 100%; max-inline-size: 12.5rem; margin: 0; aspect-ratio: 1; }
.odl-donut-breakdown svg { grid-area: 1 / 1; inline-size: 100%; block-size: 100%; overflow: visible; }
.odl-donut-breakdown circle { fill: none; stroke-width: 15; transition: stroke-width var(--ds-motion-duration-short) var(--ds-motion-easing-standard), opacity var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-donut-breakdown .odl-s1 { stroke: var(--ds-color-bg-accent-bold); }
.odl-donut-breakdown .odl-s2 { stroke: var(--ds-color-bg-info-bold); }
.odl-donut-breakdown .odl-s3 { stroke: var(--ds-color-bg-warning-bold); }
.odl-donut-breakdown .odl-s4 { stroke: var(--ds-color-border-strong); }
.odl-donut-breakdown .odl-total { grid-area: 1 / 1; display: grid; justify-items: center; gap: var(--ds-space-2); text-align: center; }
.odl-donut-breakdown .odl-total b { font: var(--ds-text-numeric-lg); font-variant-numeric: tabular-nums; }
.odl-donut-breakdown .odl-total span { color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-donut-breakdown ul { inline-size: 100%; margin: 0; padding: 0; list-style: none; display: grid; font-variant-numeric: tabular-nums; }
.odl-donut-breakdown li { display: grid; grid-template-columns: var(--ds-space-12) minmax(0, 1fr) auto 5ch; align-items: center; column-gap: var(--ds-space-inline-sm);
  min-block-size: max(var(--ds-size-row-md), var(--ds-size-target-min)); padding-inline: var(--ds-space-8);
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-donut-breakdown li + li { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-donut-breakdown li:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-donut-breakdown .odl-sw { inline-size: var(--ds-space-12); block-size: var(--ds-space-12); border-radius: var(--ds-radius-detail); }
.odl-donut-breakdown .odl-k1 { background: var(--ds-color-bg-accent-bold); }
.odl-donut-breakdown .odl-k2 { background: var(--ds-color-bg-info-bold); }
.odl-donut-breakdown .odl-k3 { background: var(--ds-color-bg-warning-bold); }
.odl-donut-breakdown .odl-k4 { background: var(--ds-color-border-strong); }
.odl-donut-breakdown .odl-name { display: grid; min-inline-size: 0; padding-block: var(--ds-space-4); }
.odl-donut-breakdown .odl-name small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-donut-breakdown .odl-amt { text-align: end; }
.odl-donut-breakdown .odl-pct { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-align: end; }
.odl-donut-breakdown:has(li:hover) circle { opacity: 0.3; }
.odl-donut-breakdown:has(.odl-r1:hover) .odl-s1, .odl-donut-breakdown:has(.odl-r2:hover) .odl-s2,
.odl-donut-breakdown:has(.odl-r3:hover) .odl-s3, .odl-donut-breakdown:has(.odl-r4:hover) .odl-s4 { opacity: 1; stroke-width: 19; }
.odl-donut-breakdown .odl-foot { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
@container (min-width: 30rem) {
  .odl-donut-breakdown .odl-body { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: var(--ds-space-inset-xl); }
}
@container (max-width: 22rem) {
  .odl-donut-breakdown .odl-card { padding: var(--ds-space-inset-md); }
  .odl-donut-breakdown figure { max-inline-size: 10.5rem; }
  .odl-donut-breakdown li { padding-inline: var(--ds-space-4); }
}
@media (prefers-reduced-motion: reduce) { .odl-donut-breakdown, .odl-donut-breakdown *, .odl-donut-breakdown *::before { transition: none !important; animation: none !important; } }


.odl-date-range-picker { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 820px; background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-overlay); font: var(--ds-text-body-md); overflow: hidden; text-wrap: pretty; }
.odl-date-range-picker *, .odl-date-range-picker *::before { box-sizing: border-box; }
.odl-date-range-picker .odl-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.odl-date-range-picker .odl-presets { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-inline-xs); padding: var(--ds-space-inset-sm) var(--ds-space-inset-lg); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-sunken); }
.odl-date-range-picker .odl-presets button { flex: none; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-sm); border: 0; border-radius: var(--ds-radius-control);
  background: transparent; color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); text-align: start; white-space: nowrap; cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-date-range-picker .odl-presets button:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-date-range-picker .odl-presets button[aria-pressed="true"] { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); font-weight: var(--ds-font-weight-label); }
.odl-date-range-picker .odl-main { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); }
.odl-date-range-picker .odl-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--ds-space-inline-sm); }
.odl-date-range-picker .odl-field { display: grid; gap: var(--ds-space-stack-xs); min-inline-size: 0; }
.odl-date-range-picker .odl-field > span:first-child { color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-date-range-picker .odl-field output { display: flex; align-items: center; min-block-size: var(--ds-size-control-md); padding: 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-input);
  border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field); font: var(--ds-text-body-md); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odl-date-range-picker .odl-field.is-active output { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-date-range-picker .odl-field output.is-empty { color: var(--ds-color-text-tertiary); }
.odl-date-range-picker .odl-arrow { display: grid; place-items: center; block-size: var(--ds-size-control-md); color: var(--ds-color-icon-subtle); }
.odl-date-range-picker .odl-arrow svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-date-range-picker .odl-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-xl); }
.odl-date-range-picker .odl-month { display: grid; gap: var(--ds-space-stack-sm); align-content: start; }
.odl-date-range-picker .odl-mhead { display: grid; grid-template-columns: max(var(--ds-size-control-sm), var(--ds-size-target-min)) 1fr max(var(--ds-size-control-sm), var(--ds-size-target-min)); align-items: center; }
.odl-date-range-picker .odl-mhead h3 { grid-column: 2; margin: 0; text-align: center; font: var(--ds-text-title-sm); font-variant-numeric: tabular-nums; }
.odl-date-range-picker .odl-nav { display: grid; place-items: center; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; border-radius: var(--ds-radius-control);
  background: transparent; color: var(--ds-color-icon-default); cursor: pointer; }
.odl-date-range-picker .odl-nav.is-next { grid-column: 3; }
.odl-date-range-picker .odl-nav:hover:not(:disabled) { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-date-range-picker .odl-nav:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-date-range-picker .odl-nav svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-date-range-picker .odl-wd, .odl-date-range-picker .odl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.odl-date-range-picker .odl-grid { row-gap: var(--ds-space-2); }
.odl-date-range-picker .odl-wd abbr { padding-block: var(--ds-space-4); text-align: center; text-decoration: none; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); }
.odl-date-range-picker .odl-day { display: grid; place-items: center; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; background: transparent; color: var(--ds-color-text-primary);
  font: var(--ds-text-body-md); font-variant-numeric: tabular-nums; cursor: pointer; }
.odl-date-range-picker .odl-day span { display: grid; place-items: center; inline-size: min(100%, max(var(--ds-size-control-sm), var(--ds-size-target-min))); aspect-ratio: 1; border-radius: var(--ds-radius-control-sm);
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-date-range-picker .odl-day:hover:not(:disabled) span { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-date-range-picker .odl-day.is-range { background: var(--ds-color-bg-accent-subtle); }
.odl-date-range-picker .odl-day.is-range:hover span { background: var(--ds-color-bg-accent-subtle-hover); }
.odl-date-range-picker .odl-day.is-start.has-end { background: linear-gradient(to right, transparent 50%, var(--ds-color-bg-accent-subtle) 50%); }
.odl-date-range-picker .odl-day.is-end.has-start { background: linear-gradient(to left, transparent 50%, var(--ds-color-bg-accent-subtle) 50%); }
.odl-date-range-picker .odl-day.is-start.is-end { background: transparent; }
.odl-date-range-picker .odl-day.is-range:nth-child(7n+1), .odl-date-range-picker .odl-day.is-range:first-of-type { border-start-start-radius: var(--ds-radius-control-sm); border-end-start-radius: var(--ds-radius-control-sm); }
.odl-date-range-picker .odl-day.is-range:nth-child(7n), .odl-date-range-picker .odl-day.is-range:last-child { border-start-end-radius: var(--ds-radius-control-sm); border-end-end-radius: var(--ds-radius-control-sm); }
.odl-date-range-picker .odl-day.is-start span, .odl-date-range-picker .odl-day.is-end span, .odl-date-range-picker .odl-day.is-start:hover span, .odl-date-range-picker .odl-day.is-end:hover span {
  background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font-weight: var(--ds-font-weight-label); }
.odl-date-range-picker .odl-day.is-today span { box-shadow: inset 0 0 0 var(--ds-border-width-emphasis) var(--ds-color-border-accent); font-weight: var(--ds-font-weight-label); }
.odl-date-range-picker .odl-day.is-today.is-start span, .odl-date-range-picker .odl-day.is-today.is-end span { box-shadow: inset 0 0 0 var(--ds-border-width-emphasis) var(--ds-color-bg-action-primary), inset 0 0 0 calc(var(--ds-border-width-emphasis) * 2) var(--ds-color-surface-overlay); }
.odl-date-range-picker .odl-day:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-date-range-picker .odl-day:focus-visible { outline: none; }
.odl-date-range-picker .odl-day:focus-visible span { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-date-range-picker footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-md); padding: var(--ds-space-inset-sm) var(--ds-space-inset-lg);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-date-range-picker .odl-summary { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-date-range-picker .odl-summary strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-date-range-picker .odl-actions { display: flex; gap: var(--ds-space-inline-sm); margin-inline-start: auto; }
.odl-date-range-picker .odl-actions button { min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg);
  font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-date-range-picker .odl-cancel { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-date-range-picker .odl-cancel:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-date-range-picker .odl-apply { border: 0; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-date-range-picker .odl-apply:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-date-range-picker .odl-apply:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-date-range-picker .odl-presets button:focus-visible, .odl-date-range-picker .odl-nav:focus-visible, .odl-date-range-picker .odl-actions button:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 30rem) {
  .odl-date-range-picker .odl-actions { flex: 1 1 100%; }
  .odl-date-range-picker .odl-actions button { flex: 1; }
}
@container (max-width: 22rem) {
  .odl-date-range-picker .odl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odl-date-range-picker .odl-arrow { display: none; }
  .odl-date-range-picker .odl-field output { padding-inline: var(--ds-space-inset-xs); }
}
@container (min-width: 600px) {
  .odl-date-range-picker .odl-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odl-date-range-picker .odl-month + .odl-month .odl-nav.is-prev, .odl-date-range-picker .odl-month:first-child .odl-nav.is-next { display: none; }
}
@container (max-width: 599.98px) {
  .odl-date-range-picker .odl-month + .odl-month { display: none; }
}
@container (min-width: 740px) {
  .odl-date-range-picker .odl-body { grid-template-columns: 11rem minmax(0, 1fr); }
  .odl-date-range-picker .odl-presets { flex-direction: column; overflow: visible; padding: var(--ds-space-inset-sm); border-block-end: 0; border-inline-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
}
@media (prefers-reduced-motion: reduce) { .odl-date-range-picker, .odl-date-range-picker *, .odl-date-range-picker *::before { transition: none !important; animation: none !important; } }


.odl-filter-bar { box-sizing: border-box; container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-sm);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
  font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-filter-bar *, .odl-filter-bar *::before { box-sizing: border-box; }
.odl-filter-bar svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-filter-bar .odl-search { display: flex; align-items: center; gap: var(--ds-space-inline-xs); flex: 1 1 14rem; max-inline-size: 20rem; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-input); background: var(--ds-color-bg-field); color: var(--ds-color-icon-subtle);
  /* concentric with the bar's corner (outer minus the gap); a pill control stays a pill */
  border-radius: max(calc(var(--ds-radius-container) - var(--ds-space-inset-sm)), calc(var(--ds-radius-control) - 4 * var(--ds-radius-container)));
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-filter-bar .odl-search:hover { border-color: var(--ds-color-border-strong); }
.odl-filter-bar .odl-search:has(input:focus-visible) { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-filter-bar .odl-search input { flex: 1; min-inline-size: 0; align-self: stretch; border: 0; padding: 0; background: transparent; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); outline: none; }
.odl-filter-bar .odl-search input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-filter-bar .odl-search input::-webkit-search-cancel-button { appearance: none; }
.odl-filter-bar kbd { padding: 0 var(--ds-space-4); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-detail); background: var(--ds-color-surface-raised);
  color: var(--ds-color-text-tertiary); font: var(--ds-text-code-sm); }
.odl-filter-bar .odl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-filter-bar .odl-chip, .odl-filter-bar .odl-ghost, .odl-filter-bar .odl-sort { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); white-space: nowrap; cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-filter-bar .odl-chip { border: var(--ds-border-width-default) dashed var(--ds-color-border-default); background: transparent; color: var(--ds-color-text-secondary); }
.odl-filter-bar .odl-chip:hover { border-style: solid; background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-filter-bar .odl-chip svg { color: var(--ds-color-icon-subtle); }
.odl-filter-bar .odl-active { display: inline-flex; align-items: stretch; border: var(--ds-border-width-default) solid var(--ds-color-border-accent); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-accent-subtle); }
.odl-filter-bar .odl-active .odl-chip { border: 0; border-start-end-radius: 0; border-end-end-radius: 0; background: transparent; color: var(--ds-color-text-secondary); padding-inline-end: var(--ds-space-4); }
.odl-filter-bar .odl-active .odl-chip strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); font-variant-numeric: tabular-nums; }
.odl-filter-bar .odl-active .odl-chip:hover, .odl-filter-bar .odl-active .odl-x:hover { background: var(--ds-color-bg-accent-subtle-hover); }
.odl-filter-bar .odl-x { display: grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; border-start-end-radius: var(--ds-radius-control); border-end-end-radius: var(--ds-radius-control);
  background: transparent; color: var(--ds-color-icon-accent); cursor: pointer; }
.odl-filter-bar .odl-ghost { border: 0; background: transparent; color: var(--ds-color-text-link); font-weight: var(--ds-font-weight-label); }
.odl-filter-bar .odl-ghost:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-filter-bar .odl-end { display: flex; align-items: center; gap: var(--ds-space-inline-md); margin-inline-start: auto; }
.odl-filter-bar .odl-count { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-filter-bar .odl-count strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-filter-bar .odl-sort { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-filter-bar .odl-sort:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-filter-bar .odl-sort span { margin-inline-end: var(--ds-space-2); color: var(--ds-color-text-secondary); }
.odl-filter-bar .odl-sort svg { color: var(--ds-color-icon-subtle); }
.odl-filter-bar button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); position: relative; }
@container (max-width: 899.98px) {
  .odl-filter-bar .odl-filters { order: 3; flex-basis: 100%; }
  .odl-filter-bar .odl-search { max-inline-size: none; }
}
@container (max-width: 560px) {
  .odl-filter-bar .odl-end { order: 4; }
  .odl-filter-bar .odl-search { flex-basis: 100%; max-inline-size: none; }
  .odl-filter-bar .odl-search kbd { display: none; }
  .odl-filter-bar .odl-filters > * { flex: 1 1 auto; justify-content: center; }
  .odl-filter-bar .odl-active .odl-chip { flex: 1 1 auto; justify-content: center; }
  .odl-filter-bar .odl-end { flex-basis: 100%; justify-content: space-between; padding-block-start: var(--ds-space-stack-xs); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
}
@media (prefers-reduced-motion: reduce) { .odl-filter-bar, .odl-filter-bar *, .odl-filter-bar *::before { transition: none !important; animation: none !important; } }


.odl-code-input { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 420px; display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-xl);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
  box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-code-input *, .odl-code-input *::before { box-sizing: border-box; }
.odl-code-input .odl-mark { display: grid; place-items: center; inline-size: var(--ds-size-control-lg); block-size: var(--ds-size-control-lg); border-radius: var(--ds-radius-control);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-icon-accent); }
.odl-code-input .odl-mark svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-code-input h2 { margin: 0; font: var(--ds-text-title-lg); }
.odl-code-input .odl-head { display: grid; gap: var(--ds-space-stack-xs); }
.odl-code-input .odl-head p { margin: 0; color: var(--ds-color-text-secondary); }
.odl-code-input .odl-head strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); white-space: nowrap; }
.odl-code-input fieldset { display: grid; gap: var(--ds-space-stack-sm); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.odl-code-input legend { padding: 0; margin-block-end: var(--ds-space-stack-sm); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-code-input .odl-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--ds-space-inline-xs); }
.odl-code-input .odl-boxes input { inline-size: 100%; min-inline-size: 0; block-size: calc(var(--ds-size-control-lg) * 1.25); padding: 0; text-align: center;
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: min(var(--ds-radius-control), var(--ds-radius-container)); background: var(--ds-color-bg-field); color: var(--ds-color-text-primary);
  font: var(--ds-text-title-lg); font-family: var(--ds-font-family-mono); font-variant-numeric: tabular-nums; caret-color: var(--ds-color-border-focus);
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-code-input .odl-boxes input:hover { border-color: var(--ds-color-border-strong); }
.odl-code-input .odl-boxes input:focus-visible { outline: none; border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-focus-ring-width) var(--ds-color-border-focus); }
.odl-code-input .odl-boxes .odl-dash { inline-size: var(--ds-space-8); block-size: var(--ds-border-width-emphasis); border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); }
.odl-code-input fieldset.is-invalid .odl-boxes input { border-color: var(--ds-color-border-danger); background: var(--ds-color-bg-danger-subtle); }
.odl-code-input fieldset.is-invalid .odl-boxes input:focus-visible { box-shadow: 0 0 0 var(--ds-focus-ring-width) var(--ds-color-border-danger); }
.odl-code-input .odl-msg { display: flex; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-code-input .odl-msg svg { display: none; flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); margin-block-start: var(--ds-space-2); }
.odl-code-input fieldset.is-invalid .odl-msg { color: var(--ds-color-text-danger); }
.odl-code-input fieldset.is-invalid .odl-msg svg { display: block; }
.odl-code-input .odl-verify { display: inline-flex; align-items: center; justify-content: center; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md);
  border: 0; border-radius: var(--ds-radius-control); background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-code-input .odl-verify:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-code-input .odl-verify:disabled { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-code-input .odl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm); padding-block-start: var(--ds-space-stack-md);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-code-input .odl-link { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); padding: 0; border: 0; border-radius: var(--ds-radius-detail); background: transparent;
  color: var(--ds-color-text-link); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); cursor: pointer; }
.odl-code-input .odl-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: var(--ds-space-2); }
.odl-code-input .odl-link:disabled { color: var(--ds-color-text-secondary); font-weight: var(--ds-font-weight-body); cursor: default; }
.odl-code-input .odl-verify:focus-visible, .odl-code-input .odl-link:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .odl-code-input, .odl-code-input *, .odl-code-input *::before { transition: none !important; animation: none !important; } }


.odl-file-dropzone { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 40rem; margin-inline: auto; display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
  box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-file-dropzone *, .odl-file-dropzone *::before { box-sizing: border-box; }
.odl-file-dropzone .odl-head h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-file-dropzone .odl-head p { margin: var(--ds-space-stack-xs) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-file-dropzone .odl-drop { position: relative; display: grid; justify-items: center; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-xl) var(--ds-space-inset-lg); text-align: center;
  border: var(--ds-border-width-emphasis) dashed var(--ds-color-border-default); border-radius: var(--ds-radius-nested); background: var(--ds-color-surface-sunken);
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-file-dropzone .odl-drop:hover { border-color: var(--ds-color-border-strong); }
.odl-file-dropzone .odl-drop.is-over, .odl-file-dropzone .odl-drop:has(input:focus-visible) { border-color: var(--ds-color-border-focus); background: var(--ds-color-bg-accent-subtle); }
.odl-file-dropzone .odl-drop-icon { display: grid; place-items: center; inline-size: var(--ds-size-control-md); block-size: var(--ds-size-control-md); border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-raised); color: var(--ds-color-icon-default); box-shadow: var(--ds-elevation-raised); }
.odl-file-dropzone .odl-drop.is-over .odl-drop-icon { color: var(--ds-color-icon-accent); }
.odl-file-dropzone .odl-drop-icon svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-file-dropzone .odl-drop p { margin: 0; }
.odl-file-dropzone .odl-drop .odl-types { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-file-dropzone .odl-drop .odl-over-text { display: none; color: var(--ds-color-text-accent); font-weight: var(--ds-font-weight-label); }
.odl-file-dropzone .odl-drop.is-over .odl-over-text { display: block; }
.odl-file-dropzone .odl-drop.is-over .odl-idle { display: none; }
.odl-file-dropzone .odl-browse { display: inline-flex; align-items: center; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-xs);
  color: var(--ds-color-text-link); font-weight: var(--ds-font-weight-label); text-decoration: underline; text-underline-offset: var(--ds-space-2); cursor: pointer; }
.odl-file-dropzone .odl-browse input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.odl-file-dropzone .odl-drop:has(input:focus-visible) .odl-browse { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); border-radius: var(--ds-radius-detail); }
.odl-file-dropzone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-stack-sm); }
.odl-file-dropzone li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-inline-md); padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-md);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-nested); background: var(--ds-color-surface-raised); }
.odl-file-dropzone li.is-failed { border-color: var(--ds-color-border-danger); background: var(--ds-color-bg-danger-subtle); }
.odl-file-dropzone .odl-type { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-control-sm);
  background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-icon-subtle); }
.odl-file-dropzone .odl-type svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-file-dropzone .is-done .odl-type { background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); }
.odl-file-dropzone .is-failed .odl-type { background: var(--ds-color-surface-raised); color: var(--ds-color-text-danger); }
.odl-file-dropzone .odl-info { display: grid; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-file-dropzone .odl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ds-font-weight-label); }
.odl-file-dropzone .odl-meta { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-file-dropzone .is-failed .odl-meta { color: var(--ds-color-text-danger); }
.odl-file-dropzone .odl-bar { block-size: var(--ds-space-4); margin-block: var(--ds-space-4) var(--ds-space-2); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-file-dropzone .odl-bar span { display: block; block-size: 100%; border-radius: inherit; background: var(--ds-color-bg-action-primary); transition: inline-size var(--ds-motion-duration-medium) var(--ds-motion-easing-standard); }
.odl-file-dropzone .odl-row-actions { display: flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-file-dropzone .odl-icon-btn, .odl-file-dropzone .odl-retry { display: inline-grid; place-items: center; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; border-radius: var(--ds-radius-control-sm); background: transparent; color: var(--ds-color-icon-subtle); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-file-dropzone .odl-icon-btn:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-icon-default); }
.odl-file-dropzone .odl-icon-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-file-dropzone .odl-retry { display: inline-flex; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); }
.odl-file-dropzone .odl-retry:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-file-dropzone .odl-retry svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-file-dropzone .odl-done { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-file-dropzone .odl-done svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-file-dropzone .odl-icon-btn:focus-visible, .odl-file-dropzone .odl-retry:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-file-dropzone .odl-foot { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
@container (max-width: 440px) {
  .odl-file-dropzone .odl-done span { display: none; }
  .odl-file-dropzone li.is-failed .odl-row-actions { grid-column: 2 / -1; margin-block-start: calc(-1 * var(--ds-space-4)); }
  .odl-file-dropzone li { gap: var(--ds-space-inline-sm); }
}
@container (max-width: 20rem) {
  .odl-file-dropzone li { grid-template-columns: minmax(0, 1fr) auto; padding-inline-start: var(--ds-space-inset-sm); }
  .odl-file-dropzone .odl-type { display: none; }
  .odl-file-dropzone li.is-failed .odl-row-actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .odl-file-dropzone, .odl-file-dropzone *, .odl-file-dropzone *::before { transition: none !important; animation: none !important; } }


.odl-invite-members { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 520px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg);
  background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-overlay);
  box-shadow: var(--ds-elevation-overlay); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-invite-members *, .odl-invite-members *::before { box-sizing: border-box; }
.odl-invite-members .odl-head h2 { margin: 0; font: var(--ds-text-title-md); }
.odl-invite-members .odl-head p { margin: var(--ds-space-stack-xs) 0 0; text-wrap: balance; color: var(--ds-color-text-secondary); }
.odl-invite-members .odl-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-xs); }
.odl-invite-members .odl-field > label { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-invite-members .odl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min)); padding: var(--ds-space-inset-xs);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-container); background: var(--ds-color-bg-field); cursor: text;
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-invite-members .odl-chips:hover { border-color: var(--ds-color-border-strong); }
.odl-invite-members .odl-chips:has(input:focus-visible) { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-invite-members .odl-chip { display: inline-flex; align-items: center; gap: var(--ds-space-2); max-inline-size: 100%; min-inline-size: 0; padding-inline-start: var(--ds-space-inset-sm); border-radius: max(0px, calc(var(--ds-radius-container) - var(--ds-space-inset-xs)));
  background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); font: var(--ds-text-body-sm); }
.odl-invite-members .odl-chip > span { min-inline-size: 0; overflow-wrap: anywhere; }
.odl-invite-members .odl-chip.is-invalid { background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); box-shadow: inset 0 0 0 var(--ds-border-width-default) var(--ds-color-border-danger); }
.odl-invite-members .odl-chip button { display: grid; place-items: center; flex: none; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  margin-block: calc(-1 * var(--ds-space-4)); padding: 0; border: 0; border-radius: var(--ds-radius-control-sm); background: transparent; color: inherit; opacity: 0.7; cursor: pointer; }
.odl-invite-members .odl-chip button:hover { opacity: 1; }
.odl-invite-members .odl-chip button svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-invite-members .odl-chips input { flex: 1; min-inline-size: 14ch; min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-xs); border: 0; background: transparent; color: inherit; font: var(--ds-text-body-md); outline: none; }
.odl-invite-members .odl-chips input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-invite-members .odl-hint { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-invite-members .odl-hint.is-error { color: var(--ds-color-text-danger); }
.odl-invite-members .odl-select { position: relative; display: grid; }
.odl-invite-members select { appearance: none; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-32) 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-input);
  border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field); color: var(--ds-color-text-primary); font: var(--ds-text-body-md); cursor: pointer; }
.odl-invite-members select:hover { border-color: var(--ds-color-border-strong); }
.odl-invite-members .odl-select svg { position: absolute; inset-inline-end: var(--ds-space-inset-sm); inset-block-start: 50%; translate: 0 -50%; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); pointer-events: none; }
.odl-invite-members .odl-role-desc { display: flex; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-invite-members .odl-seats { display: flex; align-items: center; gap: var(--ds-space-inline-sm); margin: 0; padding: var(--ds-space-inset-sm) var(--ds-space-inset-md); border-radius: var(--ds-radius-container);
  background: var(--ds-color-surface-sunken); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-invite-members .odl-seats strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-invite-members .odl-meter { display: flex; gap: var(--ds-space-2); flex: none; }
.odl-invite-members .odl-meter i { inline-size: var(--ds-space-4); block-size: var(--ds-space-12); border-radius: var(--ds-radius-full); background: var(--ds-color-text-secondary); }
.odl-invite-members .odl-meter i.is-free { background: var(--ds-color-border-default); }
.odl-invite-members .odl-meter i.is-pending { background: var(--ds-color-bg-action-primary); }
.odl-invite-members .odl-actions { display: flex; justify-content: flex-end; gap: var(--ds-space-inline-sm); padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-invite-members .odl-actions button { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); white-space: nowrap;
  border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-invite-members .odl-cancel { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-invite-members .odl-cancel:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-invite-members .odl-send { border: 0; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-invite-members .odl-send:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-invite-members .odl-send:disabled { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-invite-members .odl-send:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-invite-members .odl-send svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-invite-members .odl-chip button:focus-visible, .odl-invite-members select:focus-visible, .odl-invite-members .odl-actions button:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 26rem) { .odl-invite-members .odl-actions button { flex: 1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .odl-invite-members, .odl-invite-members *, .odl-invite-members *::before { transition: none !important; animation: none !important; } }


.odl-settings-toggles { box-sizing: border-box; inline-size: 100%; max-inline-size: 560px; margin: 0; padding: 0; border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-settings-toggles *, .odl-settings-toggles *::before { box-sizing: border-box; }
.odl-settings-toggles legend { float: inline-start; inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; padding: var(--ds-space-inset-lg) var(--ds-space-inset-lg) var(--ds-space-inset-sm); font: var(--ds-text-title-sm); }
.odl-settings-toggles legend + * { clear: both; }
.odl-settings-toggles label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-inline-md); align-items: center; padding: var(--ds-space-inset-md) var(--ds-space-inset-lg);
  cursor: pointer; }
.odl-settings-toggles label { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-settings-toggles .odl-text { display: grid; gap: var(--ds-space-2); }
.odl-settings-toggles .odl-text small { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-wrap: balance; }
.odl-settings-toggles .odl-text em { font-style: normal; color: var(--ds-color-text-tertiary); }
.odl-settings-toggles input { appearance: none; margin: 0; flex: none; position: relative; inline-size: calc(var(--ds-size-target-pointer) * 1.75); block-size: var(--ds-size-target-pointer);
  border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-settings-toggles input::before { content: ""; position: absolute; inset-block: var(--ds-space-2); inset-inline-start: var(--ds-space-2); aspect-ratio: 1; border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-raised); box-shadow: var(--ds-elevation-raised);
  transition: transform var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-settings-toggles input:checked { background: var(--ds-color-bg-action-primary); }
.odl-settings-toggles input:checked::before { transform: translateX(calc(var(--ds-size-target-pointer) * 0.75)); }
.odl-settings-toggles input:hover:not(:disabled) { filter: brightness(0.95); }
.odl-settings-toggles input:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-settings-toggles input:disabled { opacity: var(--ds-opacity-disabled-container); cursor: not-allowed; }
.odl-settings-toggles label:has(input:disabled) { cursor: not-allowed; }
.odl-settings-toggles label:has(input:disabled) .odl-text > span { color: var(--ds-color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .odl-settings-toggles, .odl-settings-toggles *, .odl-settings-toggles *::before { transition: none !important; animation: none !important; } }


.odl-sign-in-form { box-sizing: border-box; container-type: inline-size; inline-size: 100%; max-inline-size: 400px; display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-xl);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
  box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-sign-in-form *, .odl-sign-in-form *::before { box-sizing: border-box; }
.odl-sign-in-form .odl-head h2 { margin: 0; font: var(--ds-text-title-lg); text-wrap: balance; }
.odl-sign-in-form .odl-head p { margin: var(--ds-space-stack-xs) 0 0; color: var(--ds-color-text-secondary); }
.odl-sign-in-form form { display: grid; gap: var(--ds-space-stack-md); margin: 0; }
.odl-sign-in-form .odl-field { display: grid; gap: var(--ds-space-stack-xs); }
.odl-sign-in-form .odl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-inline-sm); }
.odl-sign-in-form label { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-sign-in-form .odl-control { display: flex; align-items: center; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); border: var(--ds-border-width-default) solid var(--ds-color-border-input);
  border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field); transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-sign-in-form .odl-control:hover { border-color: var(--ds-color-border-strong); }
.odl-sign-in-form .odl-control:has(input:focus-visible) { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-sign-in-form .odl-control input { flex: 1; min-inline-size: 0; align-self: stretch; padding: 0 var(--ds-space-inset-md); border: 0; background: transparent; color: inherit; font: var(--ds-text-body-md); outline: none; }
.odl-sign-in-form .odl-control input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-sign-in-form .odl-field.is-invalid .odl-control { border-color: var(--ds-color-border-danger); }
.odl-sign-in-form .odl-field.is-invalid .odl-control:has(input:focus-visible) { box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-danger); }
.odl-sign-in-form .odl-error { display: flex; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-danger); font: var(--ds-text-body-sm); }
.odl-sign-in-form .odl-error svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); margin-block-start: var(--ds-space-2); }
.odl-sign-in-form .odl-reveal { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); align-self: stretch; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  margin: var(--ds-space-2); padding: 0 var(--ds-space-inset-sm); border: 0; border-radius: var(--ds-radius-control-sm); background: transparent; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); cursor: pointer; }
.odl-sign-in-form .odl-reveal:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-sign-in-form .odl-reveal svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-sign-in-form .odl-reveal .odl-off, .odl-sign-in-form .odl-reveal[aria-pressed="true"] .odl-on { display: none; }
.odl-sign-in-form .odl-reveal[aria-pressed="true"] .odl-off { display: block; }
.odl-sign-in-form a { color: var(--ds-color-text-link); font: var(--ds-text-label-md); text-underline-offset: var(--ds-space-2); border-radius: var(--ds-radius-detail); }
.odl-sign-in-form .odl-label-row a { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); text-decoration: none; }
.odl-sign-in-form .odl-label-row a:hover { text-decoration: underline; }
.odl-sign-in-form .odl-check { display: flex; align-items: center; gap: var(--ds-space-inline-sm); min-block-size: var(--ds-size-target-min); font: var(--ds-text-body-md); font-weight: var(--ds-font-weight-body); cursor: pointer; }
.odl-sign-in-form .odl-check input { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); margin: 0; accent-color: var(--ds-color-bg-action-primary); cursor: pointer; }
.odl-sign-in-form .odl-check small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-sign-in-form .odl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-sm); inline-size: 100%; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-sign-in-form .odl-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-sign-in-form .odl-primary { border: 0; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-sign-in-form .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-sign-in-form .odl-primary:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-sign-in-form .odl-secondary { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-sign-in-form .odl-secondary:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-sign-in-form .odl-divider { display: flex; align-items: center; gap: var(--ds-space-inline-md); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); }
.odl-sign-in-form .odl-divider::before, .odl-sign-in-form .odl-divider::after { content: ""; flex: 1; border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-sign-in-form .odl-foot { margin: 0; padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-align: center; }
.odl-sign-in-form .odl-btn:focus-visible, .odl-sign-in-form .odl-reveal:focus-visible, .odl-sign-in-form a:focus-visible, .odl-sign-in-form .odl-check input:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 300px) { .odl-sign-in-form .odl-reveal span { display: none; } }
@media (prefers-reduced-motion: reduce) { .odl-sign-in-form, .odl-sign-in-form *, .odl-sign-in-form *::before { transition: none !important; animation: none !important; } }


.odl-action-menu { box-sizing: border-box; inline-size: 100%; max-inline-size: 18rem; margin-inline: auto; display: grid; justify-items: end; gap: var(--ds-space-4);
  color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-action-menu *, .odl-action-menu *::before { box-sizing: border-box; }
.odl-action-menu .odl-trigger { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-control);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-action-menu .odl-trigger:hover, .odl-action-menu .odl-trigger[aria-expanded="true"] { background: var(--ds-color-bg-neutral-subtle); }
.odl-action-menu .odl-trigger svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-action-menu [role="menu"] { inline-size: 100%; margin: 0; padding: var(--ds-space-4); list-style: none; display: grid;
  background: var(--ds-color-surface-overlay); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-overlay);
  box-shadow: var(--ds-elevation-floating); transform-origin: top right; animation: odl-action-menu-in var(--ds-motion-duration-short) var(--ds-motion-easing-enter) both; }
.odl-action-menu [role="menu"][hidden] { display: none; }
@keyframes odl-action-menu-in { from { opacity: 0; transform: scale(var(--ds-motion-scale-enter)); } }
.odl-action-menu .odl-group { padding: var(--ds-space-6) var(--ds-space-inset-xs) var(--ds-space-2); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); letter-spacing: var(--ds-text-label-sm-tracking); }
.odl-action-menu [role="separator"] { block-size: var(--ds-border-width-default); margin: var(--ds-space-4) calc(-1 * var(--ds-space-4)); background: var(--ds-color-border-subtle); }
.odl-action-menu [role="menuitem"] { display: grid; grid-template-columns: var(--ds-size-icon-sm) minmax(0, 1fr) auto; gap: var(--ds-space-inline-sm); align-items: center;
  min-block-size: max(var(--ds-size-row-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-xs); border-radius: var(--ds-radius-nested); cursor: pointer; outline: none; }
.odl-action-menu [role="menuitem"] > svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-action-menu [role="menuitem"]:hover, .odl-action-menu [role="menuitem"]:focus { background: var(--ds-color-bg-neutral-subtle); }
.odl-action-menu [role="menuitem"]:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
.odl-action-menu [role="menuitem"]:hover > svg, .odl-action-menu [role="menuitem"]:focus > svg { color: var(--ds-color-icon-default); }
.odl-action-menu kbd { display: inline-flex; gap: var(--ds-space-2); font: var(--ds-text-body-sm); font-family: var(--ds-font-family-text); color: var(--ds-color-text-tertiary); white-space: nowrap; }
.odl-action-menu .odl-sub > span:last-child svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); display: block; }
.odl-action-menu [aria-disabled="true"] { cursor: not-allowed; color: var(--ds-color-text-disabled); }
.odl-action-menu [aria-disabled="true"] > svg, .odl-action-menu [aria-disabled="true"] small { color: var(--ds-color-text-disabled); }
.odl-action-menu [aria-disabled="true"]:hover { background: transparent; }
.odl-action-menu small { font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-action-menu .odl-danger, .odl-action-menu .odl-danger > svg { color: var(--ds-color-text-danger); }
.odl-action-menu .odl-danger:hover, .odl-action-menu .odl-danger:focus { background: var(--ds-color-bg-danger-subtle); }
.odl-action-menu .odl-danger:hover > svg, .odl-action-menu .odl-danger:focus > svg { color: var(--ds-color-text-danger); }
.odl-action-menu .odl-danger kbd { color: var(--ds-color-text-tertiary); }
.odl-action-menu .odl-trigger:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .odl-action-menu, .odl-action-menu *, .odl-action-menu *::before { transition: none !important; animation: none !important; } }


.odl-confirm-dialog { box-sizing: border-box; inline-size: 100%; max-inline-size: 440px; display: grid; container-type: inline-size;
  background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-overlay); font: var(--ds-text-body-md); text-wrap: pretty; overflow: hidden; }
.odl-confirm-dialog *, .odl-confirm-dialog *::before { box-sizing: border-box; }
.odl-confirm-dialog .odl-main { display: grid; gap: var(--ds-space-stack-md); padding: var(--ds-space-inset-lg); }
.odl-confirm-dialog .odl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-inline-md); align-items: start; }
.odl-confirm-dialog .odl-mark { display: grid; place-items: center; inline-size: var(--ds-size-control-md); block-size: var(--ds-size-control-md); border-radius: var(--ds-radius-full);
  background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); }
.odl-confirm-dialog .odl-mark svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-confirm-dialog h2 { margin: 0; font: var(--ds-text-title-md); }
.odl-confirm-dialog .odl-lede { margin: var(--ds-space-4) 0 0; color: var(--ds-color-text-secondary); }
.odl-confirm-dialog ul { margin: 0; padding: var(--ds-space-inset-sm) var(--ds-space-inset-md); list-style: none; display: grid; gap: var(--ds-space-stack-xs);
  border-radius: var(--ds-radius-container); background: var(--ds-color-surface-sunken); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-confirm-dialog li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-inline-md); }
.odl-confirm-dialog li span:last-child { color: var(--ds-color-text-secondary); white-space: nowrap; }
.odl-confirm-dialog .odl-field { display: grid; gap: var(--ds-space-stack-xs); }
.odl-confirm-dialog label { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); }
.odl-confirm-dialog code { font: var(--ds-text-code-sm); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-detail); background: var(--ds-color-bg-neutral-subtle); }
.odl-confirm-dialog input { inline-size: 100%; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field);
  color: var(--ds-color-text-primary); font: var(--ds-text-code-md); font-size: var(--ds-font-size-input); }
.odl-confirm-dialog input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-confirm-dialog input:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-confirm-dialog .odl-hint { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-confirm-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-sunken); }
.odl-confirm-dialog button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control);
  font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-confirm-dialog .odl-cancel { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-confirm-dialog .odl-cancel:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-confirm-dialog .odl-delete { background: var(--ds-color-bg-danger-bold); color: var(--ds-color-text-on-danger); border: var(--ds-border-width-default) solid transparent; }
.odl-confirm-dialog .odl-delete:hover:not(:disabled) { background: var(--ds-color-bg-danger-bold-hover); }
.odl-confirm-dialog .odl-delete:active:not(:disabled) { background: var(--ds-color-bg-danger-bold-pressed); }
.odl-confirm-dialog .odl-delete:disabled { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-confirm-dialog button svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-confirm-dialog button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 26rem) {
  .odl-confirm-dialog .odl-main { padding: var(--ds-space-inset-md); }
  .odl-confirm-dialog footer { padding: var(--ds-space-inset-md); }
  .odl-confirm-dialog .odl-head { grid-template-columns: minmax(0, 1fr); }
  .odl-confirm-dialog footer button { flex: 1 1 100%; }
  .odl-confirm-dialog .odl-delete { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .odl-confirm-dialog, .odl-confirm-dialog *, .odl-confirm-dialog *::before { transition: none !important; animation: none !important; } }


.odl-detail-drawer { box-sizing: border-box; inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; max-block-size: 100%; display: flex; flex-direction: column; container-type: inline-size;
  background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-overlay); font: var(--ds-text-body-md); text-wrap: pretty; overflow: hidden; }
.odl-detail-drawer *, .odl-detail-drawer *::before { box-sizing: border-box; }
.odl-detail-drawer header { display: flex; align-items: center; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-lg);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-detail-drawer h2 { flex: 1 1 auto; min-inline-size: 0; margin: 0; font: var(--ds-text-title-sm); overflow-wrap: anywhere; text-wrap: balance; }
.odl-detail-drawer .odl-nav { display: flex; align-items: center; flex: none; }
.odl-detail-drawer .odl-pos { padding-inline: var(--ds-space-4); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-detail-drawer .odl-sep { inline-size: var(--ds-border-width-default); block-size: var(--ds-size-icon-md); margin-inline: var(--ds-space-4); background: var(--ds-color-border-subtle); }
.odl-detail-drawer .odl-icon-btn { display: inline-grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0; border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-icon-default); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-detail-drawer .odl-icon-btn:hover { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-detail-drawer .odl-icon-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-detail-drawer .odl-body { flex: 1 1 auto; overflow: auto; display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); align-content: start; }
.odl-detail-drawer .odl-top { display: grid; gap: var(--ds-space-stack-xs); }
.odl-detail-drawer .odl-pill { justify-self: start; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8);
  border-radius: var(--ds-radius-full); background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-primary); font: var(--ds-text-label-md); white-space: nowrap; column-gap: var(--ds-space-6); }
.odl-detail-drawer .odl-pill::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: var(--ds-color-text-warning); }
.odl-detail-drawer .odl-amount { margin: 0; font: var(--ds-text-headline-sm); font-variant-numeric: tabular-nums; }
.odl-detail-drawer .odl-amount span { color: var(--ds-color-text-tertiary); }
.odl-detail-drawer .odl-amount small { margin-inline-start: var(--ds-space-4); color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); }
.odl-detail-drawer .odl-sub { margin: 0; color: var(--ds-color-text-secondary); }
.odl-detail-drawer .odl-label { margin: 0 0 var(--ds-space-stack-xs); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-detail-drawer dl { margin: 0; display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; font-variant-numeric: tabular-nums; }
.odl-detail-drawer dl > div { display: contents; }
.odl-detail-drawer dt, .odl-detail-drawer dd { margin: 0; padding-block: var(--ds-space-inset-xs); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-detail-drawer dl > div:last-child > * { border-block-end: 0; }
.odl-detail-drawer dt { color: var(--ds-color-text-secondary); }
.odl-detail-drawer dd { min-inline-size: 0; overflow-wrap: anywhere; }
.odl-detail-drawer dd code { font: var(--ds-text-code-sm); }
.odl-detail-drawer dd .odl-muted { color: var(--ds-color-text-tertiary); }
.odl-detail-drawer .odl-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ds-space-inline-sm); align-items: center;
  padding: var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-nested); }
.odl-detail-drawer .odl-file-icon { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-control-sm);
  background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-icon-default); }
.odl-detail-drawer .odl-file-icon svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-detail-drawer .odl-file p { margin: 0; min-inline-size: 0; }
.odl-detail-drawer .odl-file b { display: block; font: var(--ds-text-code-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odl-detail-drawer .odl-file small { display: block; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-detail-drawer footer { position: sticky; inset-block-end: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-inline-sm);
  padding: var(--ds-space-inset-sm) var(--ds-space-inset-lg); background: var(--ds-color-surface-overlay); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-detail-drawer .odl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); flex: none;
  min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control);
  font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-detail-drawer .odl-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-detail-drawer .odl-secondary { background: var(--ds-color-surface-raised); color: var(--ds-color-text-danger); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-detail-drawer .odl-secondary:hover { background: var(--ds-color-bg-danger-subtle); }
.odl-detail-drawer .odl-primary { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: var(--ds-border-width-default) solid transparent; }
.odl-detail-drawer .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-detail-drawer .odl-primary:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-detail-drawer button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 380px) {
  .odl-detail-drawer header { padding-inline-start: var(--ds-space-inset-md); }
  .odl-detail-drawer .odl-pos, .odl-detail-drawer .odl-sep { display: none; }
  .odl-detail-drawer .odl-body { padding: var(--ds-space-inset-md); }
  .odl-detail-drawer dl { grid-template-columns: minmax(6.5rem, 2fr) 3fr; }
  .odl-detail-drawer footer { padding-inline: var(--ds-space-inset-md); }
  .odl-detail-drawer footer .odl-btn { flex: 1 1 0; }
}
/* Very narrow: each label sits over its value. */
@container (max-width: 18rem) {
  .odl-detail-drawer dl { grid-template-columns: minmax(0, 1fr); }
  .odl-detail-drawer dt { padding-block-end: 0; border-block-end: 0; font: var(--ds-text-body-sm); }
  .odl-detail-drawer dd { padding-block-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .odl-detail-drawer, .odl-detail-drawer *, .odl-detail-drawer *::before { transition: none !important; animation: none !important; } }


.odl-page-header-tabs { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md);
  padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) 0; background: var(--ds-color-surface-base); color: var(--ds-color-text-primary);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-page-header-tabs *, .odl-page-header-tabs *::before { box-sizing: border-box; }
.odl-page-header-tabs .odl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; font: var(--ds-text-body-sm); }
.odl-page-header-tabs .odl-crumbs li { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-page-header-tabs .odl-crumbs li + li::before { content: "/"; color: var(--ds-color-text-tertiary); padding-inline: var(--ds-space-2); }
.odl-page-header-tabs .odl-crumbs a { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); padding-inline: var(--ds-space-4); margin-inline: calc(-1 * var(--ds-space-4));
  border-radius: var(--ds-radius-control-sm); color: var(--ds-color-text-secondary); text-decoration: none; }
.odl-page-header-tabs .odl-crumbs a:hover { color: var(--ds-color-text-primary); text-decoration: underline; text-underline-offset: var(--ds-space-4); }
.odl-page-header-tabs .odl-crumbs [aria-current] { color: var(--ds-color-text-primary); }
/* One grid for identity and actions, so the title keeps one line at tablet width and the buttons move beside the summary. */
.odl-page-header-tabs .odl-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark title acts" "meta meta acts";
  align-items: center; column-gap: var(--ds-space-inline-sm); row-gap: var(--ds-space-stack-xs); }
.odl-page-header-tabs .odl-id { display: contents; }
.odl-page-header-tabs .odl-mark { grid-area: mark; }
.odl-page-header-tabs .odl-title { grid-area: title; display: flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-page-header-tabs .odl-mark { display: grid; place-items: center; inline-size: var(--ds-size-control-lg); block-size: var(--ds-size-control-lg); border-radius: var(--ds-radius-control);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); }
.odl-page-header-tabs h1 { min-inline-size: 0; margin: 0; font: var(--ds-text-headline-sm); overflow-wrap: break-word; text-wrap: balance; }
.odl-page-header-tabs .odl-title .odl-star { flex: none; }
.odl-page-header-tabs .odl-star { color: var(--ds-color-icon-subtle); }
.odl-page-header-tabs .odl-star[aria-pressed="true"] { color: var(--ds-color-text-warning); }
.odl-page-header-tabs .odl-star[aria-pressed="true"] svg { fill: currentColor; }
.odl-page-header-tabs .odl-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs); margin: 0; padding: 0; list-style: none; }
.odl-page-header-tabs .odl-meta li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm);
  background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-page-header-tabs .odl-meta b { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-page-header-tabs .odl-meta svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); flex: none; }
.odl-page-header-tabs .odl-acts { grid-area: acts; align-self: start; display: flex; gap: var(--ds-space-inline-sm); margin-inline-start: var(--ds-space-inline-md); }
.odl-page-header-tabs button { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover), color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-page-header-tabs .odl-icon-btn { display: inline-grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0; border: 0; border-radius: var(--ds-radius-control); background: transparent; }
.odl-page-header-tabs .odl-icon-btn:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-page-header-tabs .odl-icon-btn svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-page-header-tabs .odl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); white-space: nowrap;
  min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); }
.odl-page-header-tabs .odl-btn svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-page-header-tabs .odl-secondary { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-page-header-tabs .odl-secondary:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-page-header-tabs .odl-primary { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: var(--ds-border-width-default) solid transparent; }
.odl-page-header-tabs .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-page-header-tabs .odl-primary:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-page-header-tabs [role="tablist"] { display: flex; gap: var(--ds-space-inline-md); min-inline-size: 0; margin-inline: calc(-1 * var(--ds-space-inset-lg)); padding-inline: var(--ds-space-inset-lg);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--ds-space-inset-lg); }
.odl-page-header-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.odl-page-header-tabs [role="tab"] { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min));
  padding: 0 var(--ds-space-2); border: 0; background: transparent; color: var(--ds-color-text-secondary); white-space: nowrap; }
.odl-page-header-tabs [role="tab"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--ds-border-width-selected); border-radius: var(--ds-radius-full); background: transparent; }
.odl-page-header-tabs [role="tab"]:hover { color: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"]:hover::after { background: var(--ds-color-border-default); }
.odl-page-header-tabs [role="tab"][aria-selected="true"] { color: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"][aria-selected="true"]::after { background: var(--ds-color-text-primary); }
.odl-page-header-tabs [role="tab"] svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-page-header-tabs [role="tab"][aria-selected="true"] svg { color: var(--ds-color-icon-default); }
.odl-page-header-tabs [role="tab"] small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-page-header-tabs button:focus-visible, .odl-page-header-tabs a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-page-header-tabs [role="tab"]:focus-visible { outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
@container (max-width: 52rem) {
  .odl-page-header-tabs .odl-top { grid-template-areas: "mark title title" "meta meta acts"; }
  .odl-page-header-tabs .odl-acts { align-self: end; }
}
@container (max-width: 560px) {
  .odl-page-header-tabs .odl-crumbs li:last-child { display: none; }
  .odl-page-header-tabs .odl-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "meta" "acts"; }
  .odl-page-header-tabs .odl-acts { margin: var(--ds-space-stack-sm) 0 0; }
  .odl-page-header-tabs [role="tablist"] { mask-image: linear-gradient(to left, transparent, currentColor var(--ds-space-32)); }
  .odl-page-header-tabs .odl-mark { display: none; }
  .odl-page-header-tabs .odl-acts { flex: 1 1 100%; flex-wrap: wrap; }
  .odl-page-header-tabs .odl-acts .odl-btn { flex: 1 1 auto; }
  .odl-page-header-tabs .odl-meta li:nth-child(2) { display: none; }
}
@container (max-width: 24rem) {
  .odl-page-header-tabs h1 { font: var(--ds-text-title-lg); }
}
@media (prefers-reduced-motion: reduce) { .odl-page-header-tabs, .odl-page-header-tabs *, .odl-page-header-tabs *::before, .odl-page-header-tabs *::after { transition: none !important; animation: none !important; } }


.odl-pagination { box-sizing: border-box; inline-size: 100%; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-pagination *, .odl-pagination *::before { box-sizing: border-box; }
.odl-pagination .odl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm) var(--ds-space-inline-md);
  padding: var(--ds-space-inset-xs) var(--ds-space-inset-sm); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-pagination .odl-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs) var(--ds-space-inline-md); }
.odl-pagination .odl-count { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-pagination .odl-count b { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-pagination .odl-rows { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-pagination .odl-select { position: relative; display: inline-grid; }
.odl-pagination select { appearance: none; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 calc(var(--ds-space-inset-xs) + var(--ds-size-icon-sm) + var(--ds-space-4)) 0 var(--ds-space-inset-xs);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field);
  color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; cursor: pointer; }
.odl-pagination .odl-select svg { position: absolute; inset-inline-end: var(--ds-space-inset-xs); inset-block-start: 50%; translate: 0 -50%; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm);
  color: var(--ds-color-icon-subtle); pointer-events: none; }
.odl-pagination ol { display: flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.odl-pagination .odl-page, .odl-pagination .odl-step { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-xs);
  border: var(--ds-border-width-default) solid transparent; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary);
  font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-pagination .odl-page:hover, .odl-pagination .odl-step:hover:not(:disabled) { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-pagination .odl-page[aria-current="page"] { background: var(--ds-color-surface-raised); border-color: var(--ds-color-border-strong); color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-heading); cursor: default; }
.odl-pagination .odl-step { color: var(--ds-color-text-primary); }
.odl-pagination .odl-step:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-pagination .odl-step svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-pagination .odl-gap { display: inline-grid; place-items: center; min-inline-size: var(--ds-size-control-sm); color: var(--ds-color-text-tertiary); }
.odl-pagination .odl-pager { display: flex; align-items: center; gap: var(--ds-space-2); margin-inline-start: auto; }
.odl-pagination .odl-of { display: none; margin: 0; padding-inline: var(--ds-space-inset-xs); font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-pagination .odl-of span { color: var(--ds-color-text-secondary); font-weight: var(--ds-font-weight-body); }
.odl-pagination select:focus-visible, .odl-pagination button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 640px) {
  .odl-pagination .odl-step span { display: none; }
}
@container (max-width: 520px) {
  .odl-pagination .odl-bar { padding-inline: 0; }
  .odl-pagination .odl-info { flex: 1 1 100%; justify-content: space-between; }
  .odl-pagination .odl-pager { flex: 1 1 100%; justify-content: space-between; }
  .odl-pagination ol { display: none; }
  .odl-pagination .odl-of { display: block; }
  .odl-pagination .odl-step { border-color: var(--ds-color-border-default); }
}
@media (prefers-reduced-motion: reduce) { .odl-pagination, .odl-pagination *, .odl-pagination *::before { transition: none !important; animation: none !important; } }


.odl-command-menu { box-sizing: border-box; inline-size: 100%; max-inline-size: 560px; background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-overlay); font: var(--ds-text-body-md); overflow: hidden; text-wrap: pretty; }
.odl-command-menu .odl-search { display: flex; align-items: center; gap: var(--ds-space-inline-sm); padding: 0 var(--ds-space-inset-lg); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-command-menu .odl-search svg { flex: none; inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); color: var(--ds-color-icon-subtle); }
.odl-command-menu input { flex: 1; min-inline-size: 0; block-size: var(--ds-size-control-lg); border: 0; background: transparent; color: inherit; font: var(--ds-text-body-lg); outline: none; }
.odl-command-menu input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-command-menu .odl-search:has(input:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ds-border-width-emphasis)) 0 var(--ds-color-border-focus); }
.odl-command-menu kbd { display: inline-grid; place-items: center; min-inline-size: var(--ds-space-20); padding: 0 var(--ds-space-4); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-detail); background: var(--ds-color-surface-raised); color: var(--ds-color-text-secondary); font: var(--ds-text-code-sm); }
.odl-command-menu [role="listbox"] { max-block-size: calc(var(--ds-size-row-md) * 9); overflow-y: auto; padding: var(--ds-space-inset-xs); }
.odl-command-menu .odl-group { padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-4); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); }
.odl-command-menu [role="option"] { display: flex; align-items: center; gap: var(--ds-space-inline-sm); min-block-size: var(--ds-size-row-md); padding: 0 var(--ds-space-inset-sm);
  border-radius: var(--ds-radius-nested); cursor: pointer; }
.odl-command-menu [role="option"] svg { flex: none; inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); color: var(--ds-color-icon-subtle); }
.odl-command-menu [role="option"] span { flex: 1; min-inline-size: 0; }
.odl-command-menu [role="option"] small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-command-menu [role="option"]:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-command-menu [role="option"][aria-selected="true"] { background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-command-menu [role="option"][aria-selected="true"] svg { color: var(--ds-color-icon-accent); }
.odl-command-menu [hidden] { display: none; }
.odl-command-menu .odl-empty { margin: 0; padding: var(--ds-space-inset-lg); text-align: center; color: var(--ds-color-text-secondary); }
.odl-command-menu footer { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-md); padding: var(--ds-space-inset-xs) var(--ds-space-inset-lg); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  background: var(--ds-color-surface-sunken); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); }
.odl-command-menu footer span { display: inline-flex; align-items: center; gap: var(--ds-space-4); }


.odl-setup-steps { box-sizing: border-box; inline-size: 100%; max-inline-size: 440px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md); padding: var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-setup-steps header { display: grid; gap: var(--ds-space-stack-xs); }
.odl-setup-steps h3 { margin: 0; font: var(--ds-text-title-md); }
.odl-setup-steps .odl-count { display: flex; align-items: center; gap: var(--ds-space-inline-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-setup-steps progress { flex: 1; appearance: none; block-size: var(--ds-space-6); border: 0; border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-setup-steps progress::-webkit-progress-bar { background: var(--ds-color-bg-neutral-subtle); }
.odl-setup-steps progress::-webkit-progress-value { background: var(--ds-color-bg-action-primary); border-radius: var(--ds-radius-full); }
.odl-setup-steps progress::-moz-progress-bar { background: var(--ds-color-bg-action-primary); border-radius: var(--ds-radius-full); }
.odl-setup-steps ol { list-style: none; margin: 0; padding: 0; display: grid; }
.odl-setup-steps li { display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr); gap: 0 var(--ds-space-inline-md); padding-block: var(--ds-space-stack-sm); }
.odl-setup-steps li + li { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-setup-steps .odl-mark { grid-row: span 3; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); display: grid; place-items: center; border-radius: var(--ds-radius-full);
  border: var(--ds-border-width-emphasis) solid var(--ds-color-border-default); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-setup-steps .odl-mark svg { inline-size: 60%; block-size: 60%; }
.odl-setup-steps .is-done .odl-mark { background: var(--ds-color-bg-success-subtle); border-color: transparent; color: var(--ds-color-text-success); }
.odl-setup-steps .is-done .odl-title { color: var(--ds-color-text-secondary); }
.odl-setup-steps .is-now .odl-mark { background: var(--ds-color-bg-action-primary); border-color: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-setup-steps .odl-title { align-self: center; min-block-size: var(--ds-size-control-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-sm); }
.odl-setup-steps .is-now .odl-title { font-weight: var(--ds-font-weight-heading); }
.odl-setup-steps .odl-title small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-setup-steps .odl-detail { margin: var(--ds-space-4) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-wrap: pretty; }
.odl-setup-steps .odl-acts { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs); align-items: center; margin-block-start: var(--ds-space-stack-sm); }
.odl-setup-steps .odl-quiet { padding-inline: var(--ds-space-inset-sm); }
.odl-setup-steps button { min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg);
  font-weight: var(--ds-font-weight-label); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-setup-steps .odl-primary { border: 0; background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-setup-steps .odl-primary:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-setup-steps .odl-quiet { border: 0; background: transparent; color: var(--ds-color-text-secondary); }
.odl-setup-steps .odl-quiet:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-setup-steps button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .odl-setup-steps, .odl-setup-steps *, .odl-setup-steps *::before { transition: none !important; animation: none !important; } }


/* The rail uses the recessed surface, not --ds-color-surface-nav: some systems paint that one in the brand colour, and these items are written for dark text on a light surface. */
.odl-sidebar-nav { box-sizing: border-box; inline-size: 100%; max-inline-size: 17.5rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--ds-space-stack-md); padding: var(--ds-space-inset-sm);
  background: var(--ds-color-surface-sunken); color: var(--ds-color-text-primary); border-inline-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  font: var(--ds-text-body-md); text-wrap: pretty; container-type: inline-size; }
.odl-sidebar-nav *, .odl-sidebar-nav *::before { box-sizing: border-box; }
.odl-sidebar-nav svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-sidebar-nav button, .odl-sidebar-nav a, .odl-sidebar-nav summary { color: inherit; font: inherit; text-decoration: none; cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-sidebar-nav button:focus-visible, .odl-sidebar-nav a:focus-visible, .odl-sidebar-nav summary:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-sidebar-nav .odl-switcher { display: flex; align-items: center; gap: var(--ds-space-inline-sm); inline-size: 100%; min-block-size: var(--ds-size-target-min);
  padding: 0 var(--ds-space-inset-xs); border: 0; border-radius: var(--ds-radius-control); background: transparent; text-align: start; }
.odl-sidebar-nav .odl-switcher:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-sidebar-nav .odl-mark { flex: none; display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm);
  border-radius: var(--ds-radius-control-sm); background: var(--ds-color-bg-inverse); color: var(--ds-color-text-inverse); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-heading); }
.odl-sidebar-nav .odl-ws { flex: 1; min-inline-size: 0; display: grid; }
.odl-sidebar-nav .odl-ws strong { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odl-sidebar-nav .odl-ws small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odl-sidebar-nav .odl-switcher > svg { color: var(--ds-color-icon-subtle); }
.odl-sidebar-nav .odl-search { display: flex; align-items: center; gap: var(--ds-space-inline-sm); inline-size: 100%; min-block-size: var(--ds-size-target-min);
  padding: 0 var(--ds-space-inset-xs) 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-control);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-tertiary); text-align: start; }
.odl-sidebar-nav .odl-search:hover { border-color: var(--ds-color-border-default); }
.odl-sidebar-nav .odl-search span { flex: 1; }
.odl-sidebar-nav kbd { display: inline-grid; place-items: center; min-inline-size: var(--ds-space-20); padding: 0 var(--ds-space-4); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-detail); background: var(--ds-color-surface-base); color: var(--ds-color-text-secondary); font: var(--ds-text-code-sm); }
.odl-sidebar-nav nav { display: grid; gap: var(--ds-space-stack-md); }
.odl-sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.odl-sidebar-nav .odl-heading { margin: 0; padding: 0 var(--ds-space-inset-sm) var(--ds-space-4); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-sidebar-nav .odl-item { display: flex; align-items: center; gap: var(--ds-space-inline-sm); min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm);
  border-radius: var(--ds-radius-control); color: var(--ds-color-text-secondary); }
.odl-sidebar-nav .odl-item svg { color: var(--ds-color-icon-subtle); }
.odl-sidebar-nav .odl-item .odl-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odl-sidebar-nav .odl-item:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-sidebar-nav .odl-item[aria-current="page"] { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label);
  box-shadow: inset 0 0 0 var(--ds-border-width-default) var(--ds-color-border-subtle); }
.odl-sidebar-nav .odl-item[aria-current="page"] svg { color: var(--ds-color-icon-accent); }
.odl-sidebar-nav .odl-count { flex: none; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-sidebar-nav .odl-count.is-new { min-inline-size: var(--ds-space-20); padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-full); text-align: center;
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-sidebar-nav details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-inline-xs);
  min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); color: var(--ds-color-text-tertiary);
  font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-sidebar-nav details > summary::-webkit-details-marker { display: none; }
.odl-sidebar-nav details > summary:hover { background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-secondary); }
.odl-sidebar-nav details > summary svg { transition: transform var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-sidebar-nav details[open] > summary svg { transform: rotate(90deg); }
.odl-sidebar-nav .odl-person { display: flex; align-items: center; gap: var(--ds-space-inline-sm); margin-block-start: var(--ds-space-stack-sm); padding: var(--ds-space-inset-xs);
  min-block-size: var(--ds-size-target-min); border: 0; border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: 0; background: transparent; inline-size: 100%; text-align: start; }
.odl-sidebar-nav .odl-person:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-sidebar-nav .odl-avatar { flex: none; position: relative; display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm);
  border-radius: var(--ds-radius-person); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-weight: var(--ds-font-weight-heading); }
.odl-sidebar-nav .odl-avatar::after { content: ""; position: absolute; inset-block-end: calc(-1 * var(--ds-space-2)); inset-inline-end: calc(-1 * var(--ds-space-2));
  inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-success-bold);
  box-shadow: 0 0 0 var(--ds-border-width-emphasis) var(--ds-color-surface-sunken); }
.odl-sidebar-nav .odl-person > svg { color: var(--ds-color-icon-subtle); }
@media (prefers-reduced-motion: reduce) { .odl-sidebar-nav, .odl-sidebar-nav *, .odl-sidebar-nav *::before { transition: none !important; animation: none !important; } }


.odl-alert-banners { box-sizing: border-box; inline-size: 100%; max-inline-size: 640px; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-stack-sm);
  container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-alert-banners *, .odl-alert-banners *::before { box-sizing: border-box; }
.odl-alert-banners li { display: grid; grid-template-columns: var(--ds-size-icon-md) minmax(0, 1fr) auto; column-gap: var(--ds-space-inline-sm); align-items: start;
  padding: var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-xs) var(--ds-space-inset-md);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); background: var(--ds-color-surface-raised); }
.odl-alert-banners .is-info { background: var(--ds-color-bg-info-subtle); border-color: var(--ds-color-border-info); }
.odl-alert-banners .is-success { background: var(--ds-color-bg-success-subtle); border-color: var(--ds-color-border-success); }
.odl-alert-banners .is-warning { background: var(--ds-color-bg-warning-subtle); border-color: var(--ds-color-border-warning); }
.odl-alert-banners .is-danger { background: var(--ds-color-bg-danger-subtle); border-color: var(--ds-color-border-danger); }
.odl-alert-banners .odl-icon { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); margin-block-start: calc(var(--ds-space-inset-xs) + (1lh - var(--ds-size-icon-md)) / 2); }
.odl-alert-banners .is-info .odl-icon { color: var(--ds-color-text-info); }
.odl-alert-banners .is-success .odl-icon { color: var(--ds-color-text-success); }
.odl-alert-banners .is-warning .odl-icon { color: var(--ds-color-text-warning); }
.odl-alert-banners .is-danger .odl-icon { color: var(--ds-color-text-danger); }
.odl-alert-banners .odl-body { display: grid; justify-items: start; min-block-size: var(--ds-size-target-min); align-content: center; }
.odl-alert-banners p { margin: 0; padding-block: var(--ds-space-inset-xs); }
.odl-alert-banners p strong { font-weight: var(--ds-font-weight-heading); margin-inline-end: var(--ds-space-2); }
.odl-alert-banners .odl-body { padding-inline-end: var(--ds-space-inline-xs); }
.odl-alert-banners .odl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-4) var(--ds-space-inline-sm); margin-inline-start: calc(-1 * var(--ds-space-inset-xs)); margin-block-end: var(--ds-space-4); }
.odl-alert-banners button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-xs); border: 0; border-radius: var(--ds-radius-control);
  background: transparent; color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; white-space: nowrap;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-hover); }
.odl-alert-banners .odl-act { text-decoration: underline; text-decoration-thickness: var(--ds-border-width-default); text-underline-offset: var(--ds-space-4); }
.odl-alert-banners .odl-act:hover, .odl-alert-banners .odl-close:hover { background: var(--ds-color-neutral-alpha-light-3); }
.odl-alert-banners .odl-act-strong { margin-inline-start: var(--ds-space-inset-xs); background: var(--ds-color-bg-danger-bold); color: var(--ds-color-text-on-danger); padding: 0 var(--ds-space-inset-sm); text-decoration: none; }
.odl-alert-banners .odl-act-strong:hover { background: var(--ds-color-bg-danger-bold-hover); }
.odl-alert-banners .odl-close { min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; color: var(--ds-color-text-secondary); }
.odl-alert-banners button svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-alert-banners button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-alert-banners li[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .odl-alert-banners, .odl-alert-banners *, .odl-alert-banners *::before { transition: none !important; animation: none !important; } }


.odl-empty-state { box-sizing: border-box; inline-size: 100%; max-inline-size: 720px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--ds-space-stack-sm); padding: var(--ds-space-section-sm) var(--ds-space-inset-lg);
  text-align: center; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-empty-state .odl-art { display: grid; place-items: center; inline-size: 8.5rem; aspect-ratio: 1; margin-block-end: var(--ds-space-stack-xs); border-radius: var(--ds-radius-full);
  background: var(--ds-color-bg-accent-subtle); }
.odl-empty-state svg { inline-size: 6.5rem; block-size: auto; }
.odl-empty-state .odl-tray { fill: var(--ds-color-surface-sunken); stroke: var(--ds-color-border-strong); }
.odl-empty-state .odl-paper { fill: var(--ds-color-surface-raised); stroke: var(--ds-color-border-strong); }
.odl-empty-state .odl-lines { stroke: var(--ds-color-border-default); }
.odl-empty-state .odl-check { fill: var(--ds-color-bg-action-primary); }
.odl-empty-state .odl-tick { stroke: var(--ds-color-text-on-action); }
.odl-empty-state .odl-spark { stroke: var(--ds-color-icon-accent); }
.odl-empty-state h3 { margin: 0; font: var(--ds-text-title-md); text-wrap: balance; }
.odl-empty-state p { margin: 0; max-inline-size: 36ch; color: var(--ds-color-text-secondary); text-wrap: pretty; }
.odl-empty-state .odl-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--ds-space-inline-md); margin-block-start: var(--ds-space-stack-sm); }
.odl-empty-state button { min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border: 0; border-radius: var(--ds-radius-control); background: var(--ds-color-bg-action-primary);
  color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-empty-state button:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-empty-state a { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); color: var(--ds-color-text-link); font: var(--ds-text-label-lg); text-underline-offset: 0.2em; }
.odl-empty-state button:focus-visible, .odl-empty-state a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 20rem) { .odl-empty-state .odl-acts { flex-direction: column; align-self: stretch; } .odl-empty-state .odl-acts button { align-self: stretch; } }
@media (prefers-reduced-motion: reduce) { .odl-empty-state, .odl-empty-state *, .odl-empty-state *::before { transition: none !important; animation: none !important; } }


.odl-toast-stack { box-sizing: border-box; inline-size: 100%; max-inline-size: 380px; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-component-toast-gap); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-toast-stack li { display: grid; grid-template-columns: var(--ds-size-icon-md) minmax(0, 1fr) auto; gap: var(--ds-space-inline-sm); align-items: start; padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-sm) var(--ds-space-inset-md);
  background: var(--ds-color-surface-overlay); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
  box-shadow: var(--ds-elevation-floating); animation: odl-toast-in var(--ds-motion-duration-toast) var(--ds-motion-easing-toast) both; }
.odl-toast-stack li:nth-child(2) { animation-delay: var(--ds-motion-duration-stagger); }
.odl-toast-stack li:nth-child(3) { animation-delay: calc(2 * var(--ds-motion-duration-stagger)); }
@keyframes odl-toast-in { from { opacity: 0; transform: translateY(var(--ds-space-8)) scale(var(--ds-motion-scale-enter)); } }
.odl-toast-stack .odl-icon { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); margin-block-start: calc(var(--ds-space-2) + (1lh - var(--ds-size-icon-md)) / 2); }
.odl-toast-stack .is-ok .odl-icon { color: var(--ds-color-text-success); }
.odl-toast-stack .is-error .odl-icon { color: var(--ds-color-text-danger); }
.odl-toast-stack .is-busy .odl-icon { color: var(--ds-color-icon-subtle); }
.odl-toast-stack p { margin: 0; padding-block: var(--ds-space-2); font-weight: var(--ds-font-weight-label); }
.odl-toast-stack p small { display: block; margin-block-start: var(--ds-space-2); color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-toast-stack .odl-progress { display: block; block-size: var(--ds-space-4); margin-block-start: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-toast-stack .odl-progress::before { content: ""; display: block; inline-size: 62%; block-size: 100%; background: var(--ds-color-bg-action-primary); }
.odl-toast-stack .odl-acts { display: flex; align-items: center; gap: var(--ds-space-2); margin-block-start: calc(var(--ds-space-2) + (1lh - max(var(--ds-size-control-sm), var(--ds-size-target-min))) / 2); }
.odl-toast-stack button { display: inline-grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-xs);
  border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; }
.odl-toast-stack button:hover { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-toast-stack .odl-act { color: var(--ds-color-text-link); }
.odl-toast-stack button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-toast-stack button svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
@media (prefers-reduced-motion: reduce) { .odl-toast-stack, .odl-toast-stack *, .odl-toast-stack *::before { transition: none !important; animation: none !important; } }


.odl-ai-composer { box-sizing: border-box; inline-size: 100%; max-inline-size: 48rem; margin-inline: auto; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-stack-sm); color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-ai-composer *, .odl-ai-composer *::before { box-sizing: border-box; }
.odl-ai-composer .odl-box { --odl-pad: var(--ds-space-inset-sm); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm); margin: 0; padding: var(--odl-pad);
  background: var(--ds-color-surface-raised); border: var(--ds-border-width-default) solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-overlay); box-shadow: var(--ds-elevation-floating);
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-ai-composer .odl-box:has(textarea:focus-visible) { border-color: var(--ds-color-border-focus); outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-ai-composer .odl-sources { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs); margin: 0; padding: 0; list-style: none; }
.odl-ai-composer .odl-sources li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); max-inline-size: 100%; min-inline-size: 0;
  padding-inline: var(--ds-space-inset-xs) 0; border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: calc(var(--ds-radius-overlay) - var(--odl-pad) - var(--ds-border-width-default)); /* parallel to the box's corner */
  background: var(--ds-color-surface-sunken); font: var(--ds-text-label-md); white-space: nowrap; }
.odl-ai-composer .odl-sources li > svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-ai-composer .odl-sources .odl-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.odl-ai-composer .odl-sources small { flex: none; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-ai-composer .is-uploading > svg, .odl-ai-composer .is-uploading small { color: var(--ds-color-text-accent); }
.odl-ai-composer textarea { box-sizing: border-box; inline-size: 100%; min-block-size: 4.5rem; max-block-size: 14rem; field-sizing: content; resize: none;
  padding: var(--ds-space-inset-xs) var(--ds-space-4); border: 0; background: transparent; color: inherit; font: var(--ds-text-body-lg); outline: none; }
.odl-ai-composer textarea::placeholder { color: var(--ds-color-text-tertiary); }
.odl-ai-composer .odl-bar { display: flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-ai-composer .odl-modes { display: flex; padding: var(--ds-space-2); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-sunken); }
.odl-ai-composer .odl-modes label { position: relative; }
.odl-ai-composer .odl-modes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.odl-ai-composer .odl-modes span { display: grid; place-items: center; min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control-sm);
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); white-space: nowrap; }
.odl-ai-composer .odl-modes input:checked + span { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); }
.odl-ai-composer .odl-modes input:focus-visible + span { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-ai-composer .odl-spacer { flex: 1; }
.odl-ai-composer .odl-hint { color: var(--ds-color-text-tertiary); font: var(--ds-text-label-md); white-space: nowrap; }
.odl-ai-composer .odl-hint kbd { padding: 0 var(--ds-space-4); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-detail);
  background: var(--ds-color-surface-base); color: var(--ds-color-text-secondary); font: var(--ds-text-code-sm); }
.odl-ai-composer button { display: inline-grid; place-items: center; flex: none; min-inline-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min));
  padding: 0; border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-icon-default); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-ai-composer button:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-ai-composer button svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-ai-composer .odl-send { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-ai-composer .odl-send:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-ai-composer .odl-box:has(textarea:placeholder-shown) .odl-send { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: default; }
.odl-ai-composer button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-ai-composer .odl-remove { min-inline-size: var(--ds-size-target-min); min-block-size: var(--ds-size-target-min); color: var(--ds-color-icon-subtle); }
.odl-ai-composer .odl-remove svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
/* Starter prompts under the box: quiet, one line each. */
.odl-ai-composer .odl-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-inline-xs); margin: 0; padding: 0; list-style: none; }
.odl-ai-composer .odl-starters button { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-inline-size: 0; padding: 0 var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-raised); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-ai-composer .odl-starters button:hover { border-color: var(--ds-color-border-default); color: var(--ds-color-text-primary); background: var(--ds-color-surface-raised); }
.odl-ai-composer .odl-starters svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
/* Wide: more room to write, roomier padding, the shortcut shown. */
@container (min-width: 36rem) {
  .odl-ai-composer { gap: var(--ds-space-stack-md); }
  .odl-ai-composer .odl-box { --odl-pad: var(--ds-space-inset-md); gap: var(--ds-space-stack-md); }
  .odl-ai-composer textarea { min-block-size: 7rem; }
}
/* Narrow: the shortcut hint goes (phones have no Enter key habit); starters become one row that scrolls sideways. */
@container (max-width: 30rem) {
  .odl-ai-composer .odl-hint, .odl-ai-composer .odl-sources li:not(.is-uploading) small { display: none; }
  .odl-ai-composer .odl-starters { flex-wrap: nowrap; justify-content: start; padding: var(--ds-space-4) var(--ds-space-2); margin-block: calc(-1 * var(--ds-space-4)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    mask-image: linear-gradient(to left, transparent, currentColor var(--ds-space-32)); }
  .odl-ai-composer .odl-starters::-webkit-scrollbar { display: none; }
  .odl-ai-composer .odl-starters button { white-space: nowrap; }
}
@container (max-width: 20rem) {
  .odl-ai-composer .odl-bar { flex-wrap: wrap; }
  .odl-ai-composer .odl-modes { order: -1; flex: 1 1 100%; }
  .odl-ai-composer .odl-modes label { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .odl-ai-composer, .odl-ai-composer *, .odl-ai-composer *::before { transition: none !important; animation: none !important; } }


.odl-ai-suggestion { box-sizing: border-box; inline-size: 100%; max-inline-size: 600px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm);
  color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-ai-suggestion *, .odl-ai-suggestion *::before { box-sizing: border-box; }
.odl-ai-suggestion .odl-label { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); }
.odl-ai-suggestion .odl-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-md); background: var(--ds-color-bg-field);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-container); }
.odl-ai-suggestion .odl-field p { margin: 0; }
.odl-ai-suggestion .odl-target { border-radius: var(--ds-radius-detail); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-ai-suggestion[data-state="open"] .odl-target { background: var(--ds-color-bg-accent-subtle); }
.odl-ai-suggestion[data-state="accepted"] .odl-target { background: var(--ds-color-bg-success-subtle); }
.odl-ai-suggestion .odl-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-md); background: var(--ds-color-surface-raised);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-floating); }
.odl-ai-suggestion .odl-card-head { display: flex; align-items: center; gap: var(--ds-space-inline-xs); color: var(--ds-color-text-accent); font: var(--ds-text-label-md); }
.odl-ai-suggestion .odl-card-head svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-ai-suggestion .odl-card-head .odl-count { margin-inline-start: auto; color: var(--ds-color-text-tertiary); font-variant-numeric: tabular-nums; }
.odl-ai-suggestion .odl-diff { margin: 0; font: var(--ds-text-body-md); }
.odl-ai-suggestion del { color: var(--ds-color-text-danger); background: var(--ds-color-bg-danger-subtle); text-decoration-thickness: var(--ds-border-width-default); border-radius: var(--ds-radius-detail); padding: 0 var(--ds-space-2); }
.odl-ai-suggestion ins { color: var(--ds-color-text-success); background: var(--ds-color-bg-success-subtle); text-decoration: none; border-radius: var(--ds-radius-detail); padding: 0 var(--ds-space-2); font-weight: var(--ds-font-weight-label); }
.odl-ai-suggestion .odl-meta { display: grid; gap: var(--ds-space-stack-xs); }
.odl-ai-suggestion .odl-why { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-ai-suggestion .odl-why strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-ai-suggestion .odl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-space-inline-xs); padding-block-start: var(--ds-space-stack-sm); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-ai-suggestion .odl-note { margin: 0; display: flex; align-items: center; gap: var(--ds-space-inline-xs); min-inline-size: 0; color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-ai-suggestion .odl-note svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-ai-suggestion .odl-buttons { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs); }
.odl-ai-suggestion .odl-another { margin-inline-end: auto; }
.odl-ai-suggestion .odl-bar .odl-buttons { inline-size: 100%; }
.odl-ai-suggestion button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); border: var(--ds-border-width-default) solid transparent; background: transparent; color: var(--ds-color-text-primary);
  font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; white-space: nowrap; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-ai-suggestion button svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-ai-suggestion button:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-ai-suggestion .odl-accept { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); }
.odl-ai-suggestion .odl-accept:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-ai-suggestion .odl-accept:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-ai-suggestion .odl-reject { border-color: var(--ds-color-border-default); }
.odl-ai-suggestion button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-ai-suggestion .odl-done { display: flex; align-items: center; gap: var(--ds-space-inline-sm); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-ai-suggestion .odl-done svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-text-success); }
.odl-ai-suggestion .odl-done button { margin-inline-start: auto; color: var(--ds-color-text-link); }
.odl-ai-suggestion[data-state="rejected"] .odl-done svg { color: var(--ds-color-icon-subtle); }
.odl-ai-suggestion [hidden] { display: none !important; }
@container (max-width: 26rem) { .odl-ai-suggestion .odl-buttons { inline-size: 100%; } .odl-ai-suggestion .odl-buttons button { flex: 1 1 auto; min-inline-size: 0; padding-inline: var(--ds-space-inset-xs); } .odl-ai-suggestion .odl-another { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .odl-ai-suggestion, .odl-ai-suggestion *, .odl-ai-suggestion *::before { transition: none !important; animation: none !important; } }


.odl-agent-steps { box-sizing: border-box; inline-size: 100%; max-inline-size: 560px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md);
  padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-agent-steps *, .odl-agent-steps *::before, .odl-agent-steps *::after { box-sizing: border-box; }
.odl-agent-steps .odl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 var(--ds-space-inline-sm); padding-block-end: var(--ds-space-stack-md); border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-agent-steps h3 { margin: 0; font: var(--ds-text-title-sm); align-self: center; }
.odl-agent-steps .odl-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-inline-sm); margin: var(--ds-space-stack-xs) 0 0; color: var(--ds-color-text-secondary);
  font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-agent-steps .odl-run { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-label); }
.odl-agent-steps .odl-run::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: currentColor;
  animation: odl-agent-steps-pulse var(--ds-motion-duration-extra) var(--ds-motion-easing-standard) infinite alternate; }
.odl-agent-steps[data-run="stopped"] .odl-run { background: var(--ds-color-bg-danger-subtle); color: var(--ds-color-text-danger); }
.odl-agent-steps[data-run="stopped"] .odl-run::before { animation: none; }
@keyframes odl-agent-steps-pulse { to { opacity: 0.35; } }
.odl-agent-steps .odl-stop { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised);
  color: var(--ds-color-text-danger); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer; white-space: nowrap;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-agent-steps .odl-stop:hover { background: var(--ds-color-bg-danger-subtle); }
.odl-agent-steps .odl-stop svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-agent-steps .odl-stop:disabled { color: var(--ds-color-text-disabled); background: var(--ds-color-bg-disabled); border-color: var(--ds-color-border-subtle); cursor: default; }
.odl-agent-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.odl-agent-steps li { position: relative; display: grid; grid-template-columns: var(--ds-size-icon-md) minmax(0, 1fr) auto; column-gap: var(--ds-space-inline-sm); padding-block-end: var(--ds-space-stack-md); }
.odl-agent-steps li:last-child { padding-block-end: 0; }
.odl-agent-steps li:not(:last-child)::before { content: ""; position: absolute; inset-block: calc(var(--ds-size-icon-md) + (1lh - var(--ds-size-icon-md)) / 2 + var(--ds-space-4)) var(--ds-space-4); inset-inline-start: calc(var(--ds-size-icon-md) / 2 - var(--ds-border-width-default) / 2);
  border-inline-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-agent-steps .odl-dot { margin-block-start: calc((1lh - var(--ds-size-icon-md)) / 2); display: grid; place-items: center; inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); border-radius: var(--ds-radius-full);
  border: var(--ds-border-width-emphasis) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-icon-on-accent); }
.odl-agent-steps .odl-dot svg { inline-size: 75%; block-size: 75%; }
.odl-agent-steps .is-done .odl-dot { background: var(--ds-color-bg-success-bold); border-color: var(--ds-color-bg-success-bold); }
.odl-agent-steps .is-running .odl-dot { border-color: var(--ds-color-border-accent); }
.odl-agent-steps .is-running .odl-dot::after { content: ""; inline-size: 40%; block-size: 40%; border-radius: var(--ds-radius-full); background: var(--ds-color-bg-accent-bold); }
.odl-agent-steps .is-waiting .odl-dot { background: var(--ds-color-bg-warning-subtle); border-color: var(--ds-color-border-warning); color: var(--ds-color-text-warning); }
.odl-agent-steps .is-skipped .odl-dot { background: var(--ds-color-bg-neutral-subtle); border-color: var(--ds-color-border-subtle); color: var(--ds-color-text-secondary); }
.odl-agent-steps .is-stopped .odl-dot { background: var(--ds-color-bg-danger-subtle); border-color: var(--ds-color-border-danger); color: var(--ds-color-text-danger); }
.odl-agent-steps .odl-text { min-inline-size: 0; display: grid; gap: var(--ds-space-2); }
.odl-agent-steps .odl-title { font-weight: var(--ds-font-weight-label); }
.odl-agent-steps .is-skipped .odl-title { color: var(--ds-color-text-secondary); font-weight: var(--ds-font-weight-body); }
.odl-agent-steps .odl-detail { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-agent-steps .odl-time { color: var(--ds-color-text-tertiary); font: var(--ds-text-code-sm); font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; align-items: center; block-size: calc(var(--ds-text-body-md-size) * var(--ds-text-body-md-line-height)); }
.odl-agent-steps .odl-tag { justify-self: start; display: inline-flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm); font: var(--ds-text-label-md); }
.odl-agent-steps .is-waiting .odl-tag { background: var(--ds-color-bg-warning-subtle); color: var(--ds-color-text-warning); }
.odl-agent-steps .odl-progress { position: relative; block-size: var(--ds-space-4); margin-block-start: var(--ds-space-4); max-inline-size: 16rem; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); }
.odl-agent-steps .odl-progress span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 66%; border-radius: inherit; background: var(--ds-color-bg-accent-bold); }
.odl-agent-steps .odl-progress span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ds-color-surface-raised), transparent); opacity: 0.5;
  animation: odl-agent-steps-sheen var(--ds-motion-duration-extra) var(--ds-motion-easing-linear) infinite; transform: translateX(-100%); }
@keyframes odl-agent-steps-sheen { to { transform: translateX(100%); } }
.odl-agent-steps .odl-approve { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-sm); margin-block-start: var(--ds-space-stack-xs); }
.odl-agent-steps .odl-approve button { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-agent-steps .odl-approve svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-agent-steps .odl-yes { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: var(--ds-border-width-default) solid var(--ds-color-bg-action-primary); }
.odl-agent-steps .odl-yes:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-agent-steps .odl-no { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-agent-steps .odl-no:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-agent-steps details { margin-block-start: var(--ds-space-4); }
.odl-agent-steps summary { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: var(--ds-size-target-min); padding-inline-end: var(--ds-space-8);
  color: var(--ds-color-text-link); font: var(--ds-text-label-lg); cursor: pointer; list-style: none; border-radius: var(--ds-radius-control-sm); }
.odl-agent-steps summary::-webkit-details-marker { display: none; }
.odl-agent-steps summary svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); transition: transform var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-agent-steps details[open] summary svg { transform: rotate(90deg); }
.odl-agent-steps pre { margin: 0; padding: var(--ds-space-inset-sm); background: var(--ds-color-surface-sunken); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-nested); color: var(--ds-color-text-primary); font: var(--ds-text-code-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.odl-agent-steps pre .odl-k { color: var(--ds-color-text-secondary); }
.odl-agent-steps pre .odl-ok { color: var(--ds-color-text-success); }
.odl-agent-steps pre .odl-warn { color: var(--ds-color-text-warning); }
.odl-agent-steps button:focus-visible, .odl-agent-steps summary:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-agent-steps [hidden] { display: none !important; }
@container (max-width: 24rem) { .odl-agent-steps { padding: var(--ds-space-inset-md); }  }
@media (prefers-reduced-motion: reduce) { .odl-agent-steps, .odl-agent-steps *, .odl-agent-steps *::before, .odl-agent-steps *::after { transition: none !important; animation: none !important; } }


.odl-chat-answer { box-sizing: border-box; inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-chat-answer *, .odl-chat-answer *::before, .odl-chat-answer *::after { box-sizing: border-box; }
.odl-chat-answer .odl-thread { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-base);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); }
.odl-chat-answer .odl-ask { justify-self: end; max-inline-size: 85%; margin: 0; padding: var(--ds-space-inset-sm) var(--ds-space-inset-md); border-radius: var(--ds-radius-container);
  border-end-end-radius: var(--ds-radius-4); background: var(--ds-color-bg-neutral-subtle); }
.odl-chat-answer .odl-turn { display: grid; grid-template-columns: var(--ds-size-control-sm) minmax(0, 1fr); gap: var(--ds-space-inline-sm); }
.odl-chat-answer .odl-avatar { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-icon-accent); }
.odl-chat-answer .odl-avatar svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-chat-answer .odl-main { display: grid; gap: var(--ds-space-stack-md); min-inline-size: 0; }
.odl-chat-answer .odl-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs) var(--ds-space-inline-sm); min-block-size: var(--ds-size-control-sm); margin: 0;
  color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-chat-answer .odl-who b { color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); }
.odl-chat-answer .odl-live { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); color: var(--ds-color-text-accent); }
.odl-chat-answer .odl-live::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: currentColor;
  animation: odl-chat-answer-pulse var(--ds-motion-duration-extra) var(--ds-motion-easing-standard) infinite alternate; }
.odl-chat-answer .odl-text p { margin: 0; }
.odl-chat-answer .odl-nw { white-space: nowrap; }
.odl-chat-answer .odl-text { display: grid; gap: var(--ds-space-stack-sm); }
.odl-chat-answer .odl-cite { display: inline-grid; place-items: center; min-inline-size: 1.4em; block-size: 1.4em; margin-inline-start: var(--ds-space-2); padding: 0 var(--ds-space-4); vertical-align: 0.1em;
  border-radius: var(--ds-radius-4); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-chat-answer .odl-cite:hover { background: var(--ds-color-bg-accent-subtle-hover); }
.odl-chat-answer .odl-caret { display: inline-block; inline-size: 0.5em; block-size: 1.1em; margin-inline-start: var(--ds-space-2); vertical-align: -0.15em; border-radius: var(--ds-radius-2);
  background: var(--ds-color-text-primary); animation: odl-chat-answer-blink var(--ds-motion-duration-extra) var(--ds-motion-easing-standard) infinite alternate; }
@keyframes odl-chat-answer-blink { to { opacity: 0.25; } }
@keyframes odl-chat-answer-pulse { to { opacity: 0.35; } }
.odl-chat-answer .odl-sources { margin: 0; padding: var(--ds-space-inset-xs); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-nested);
  background: var(--ds-color-surface-raised); list-style: none; display: grid; }
.odl-chat-answer .odl-sources h4 { margin: 0; padding: var(--ds-space-4) var(--ds-space-8) var(--ds-space-6); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-chat-answer .odl-src { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: 0; gap: var(--ds-space-inline-sm); min-block-size: var(--ds-size-target-min);
  padding: var(--ds-space-6) var(--ds-space-8); border-radius: var(--ds-radius-nested); outline: none; transition: background-color var(--ds-motion-duration-medium) var(--ds-motion-easing-standard); }
.odl-chat-answer .odl-src.is-flash { background: var(--ds-color-bg-accent-subtle); }
.odl-chat-answer .odl-src:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
.odl-chat-answer .odl-num { display: grid; place-items: center; min-inline-size: 1.6em; block-size: 1.6em; border-radius: var(--ds-radius-4); background: var(--ds-color-bg-neutral-subtle);
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-chat-answer .odl-src span:nth-child(2) { display: grid; min-inline-size: 0; }
.odl-chat-answer .odl-src small { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-chat-answer .odl-pages { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-chat-answer .odl-actions { display: flex; align-items: center; gap: var(--ds-space-2); margin-inline-start: calc(-1 * var(--ds-space-6)); }
.odl-chat-answer .odl-actions button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0 var(--ds-space-6);
  border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-chat-answer .odl-actions button:hover { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-chat-answer .odl-actions button[aria-pressed="true"] { background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-chat-answer .odl-actions svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-chat-answer .odl-actions .odl-sep { inline-size: var(--ds-border-width-default); block-size: var(--ds-space-16); margin-inline: var(--ds-space-4); background: var(--ds-color-border-subtle); }
.odl-chat-answer .odl-actions output { margin-inline-start: auto; color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-chat-answer a:focus-visible, .odl-chat-answer button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (min-width: 40rem) { .odl-chat-answer .odl-thread { padding: var(--ds-space-inset-xl); } }
@container (max-width: 26rem) {
  .odl-chat-answer .odl-thread { padding: var(--ds-space-inset-md); }
  .odl-chat-answer .odl-turn { grid-template-columns: minmax(0, 1fr); }
  .odl-chat-answer .odl-avatar { display: none; }
  .odl-chat-answer .odl-label { display: none; }
  .odl-chat-answer .odl-src { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .odl-chat-answer .odl-pages { grid-column: 2; margin-block-start: calc(-1 * var(--ds-space-6)); }
}
@media (prefers-reduced-motion: reduce) { .odl-chat-answer, .odl-chat-answer *, .odl-chat-answer *::before { transition: none !important; animation: none !important; } }


.odl-plan-picker { box-sizing: border-box; inline-size: 100%; max-inline-size: 960px; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-plan-picker fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.odl-plan-picker .odl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-stack-sm) var(--ds-space-inline-md); margin-block-end: var(--ds-space-stack-lg); }
.odl-plan-picker h3 { margin: 0; font: var(--ds-text-title-md); }
.odl-plan-picker .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odl-plan-picker .odl-period { display: flex; }
.odl-plan-picker .odl-period div { display: inline-flex; padding: var(--ds-space-2); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-sunken); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-plan-picker .odl-period label { position: relative; }
.odl-plan-picker .odl-period input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.odl-plan-picker .odl-period span { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-md);
  border-radius: var(--ds-radius-control-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); white-space: nowrap; }
.odl-plan-picker .odl-period small { color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-plan-picker .odl-period input:checked + span { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); }
.odl-plan-picker .odl-plans { display: grid; gap: var(--ds-space-stack-md); }
@container (min-width: 40rem) { .odl-plan-picker .odl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--ds-space-stack-xs); }
  .odl-plan-picker .odl-plan { grid-row: span 4; grid-template-rows: subgrid; } }
.odl-plan-picker .odl-plan { position: relative; display: grid; align-content: start; gap: var(--ds-space-stack-xs); padding: var(--ds-space-inset-lg); cursor: pointer;
  background: var(--ds-color-surface-raised); border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised);
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-plan-picker .odl-plan:hover { border-color: var(--ds-color-border-strong); }
.odl-plan-picker .odl-plan:has(input:checked) { border-color: var(--ds-color-border-accent); box-shadow: inset 0 0 0 var(--ds-border-width-default) var(--ds-color-border-accent), var(--ds-elevation-raised);
  background: var(--ds-color-bg-accent-subtle); }
.odl-plan-picker .odl-plan:has(input:focus-visible) { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-plan-picker .odl-plan input { position: absolute; inset-block-start: var(--ds-space-inset-lg); inset-inline-end: var(--ds-space-inset-lg); inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md);
  margin: 0; accent-color: var(--ds-color-bg-action-primary); cursor: pointer; }
.odl-plan-picker .odl-name { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: var(--ds-space-4) var(--ds-space-inline-sm); font: var(--ds-text-title-md); padding-inline-end: var(--ds-space-32); }
.odl-plan-picker .odl-tag { white-space: nowrap; padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-control-sm); background: var(--ds-color-bg-action-primary);
  color: var(--ds-color-text-on-action); font: var(--ds-text-label-sm); letter-spacing: var(--ds-text-label-sm-tracking); }
.odl-plan-picker .odl-price { margin-block-start: var(--ds-space-stack-sm); font: var(--ds-text-headline-sm); font-variant-numeric: tabular-nums; }
.odl-plan-picker .odl-price small { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-plan-picker:has(input[value="year"]:checked) .odl-m, .odl-plan-picker:not(:has(input[value="year"]:checked)) .odl-y { display: none; }
.odl-plan-picker .odl-for { color: var(--ds-color-text-secondary); text-wrap: pretty; }
.odl-plan-picker ul { margin: var(--ds-space-stack-sm) 0 0; padding: 0; list-style: none; display: grid; align-content: start; gap: var(--ds-space-stack-xs); font: var(--ds-text-body-sm); }
.odl-plan-picker li { display: flex; gap: var(--ds-space-inline-xs); }
.odl-plan-picker li::before { content: ""; flex: none; inline-size: var(--ds-space-12); block-size: var(--ds-space-6); margin-block-start: var(--ds-space-4); border-inline-start: var(--ds-border-width-emphasis) solid var(--ds-color-icon-accent);
  border-block-end: var(--ds-border-width-emphasis) solid var(--ds-color-icon-accent); transform: rotate(-45deg) scale(0.8); }
.odl-plan-picker .odl-period input:focus-visible + span { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .odl-plan-picker, .odl-plan-picker *, .odl-plan-picker *::before { transition: none !important; animation: none !important; } }


.odl-order-summary { box-sizing: border-box; inline-size: 100%; max-inline-size: 440px; container-type: inline-size; text-wrap: pretty; }
.odl-order-summary *, .odl-order-summary *::before { box-sizing: border-box; }
.odl-order-summary .odl-card { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-order-summary .odl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-inline-sm); }
.odl-order-summary h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-order-summary .odl-head span { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-order-summary ul { margin: 0; padding: 0; list-style: none; display: grid; }
.odl-order-summary .odl-item { display: grid; grid-template-columns: var(--ds-size-control-md) minmax(0, 1fr) auto; column-gap: var(--ds-space-inline-sm); row-gap: var(--ds-space-stack-xs);
  padding-block: var(--ds-space-stack-sm); }
.odl-order-summary .odl-item + .odl-item { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-order-summary .odl-item:first-child { padding-block-start: 0; }
.odl-order-summary .odl-thumb { grid-row: span 2; display: grid; place-items: center; inline-size: var(--ds-size-control-md); block-size: var(--ds-size-control-md);
  border-radius: var(--ds-radius-nested); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-icon-accent); }
.odl-order-summary .odl-thumb svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-order-summary .odl-name { display: grid; min-inline-size: 0; }
.odl-order-summary .odl-name b { font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); }
.odl-order-summary .odl-name small { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-order-summary .odl-line { font-variant-numeric: tabular-nums; text-align: end; }
.odl-order-summary .odl-step { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; border: var(--ds-border-width-default) solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised); }
.odl-order-summary .odl-step button { display: grid; place-items: center; min-inline-size: var(--ds-size-target-min); min-block-size: var(--ds-size-target-min); padding: 0;
  border: 0; border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-text-primary); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-order-summary .odl-step button:hover:not(:disabled) { background: var(--ds-color-bg-neutral-subtle); }
.odl-order-summary .odl-step button:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-order-summary .odl-step svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-order-summary .odl-step output { min-inline-size: 3ch; text-align: center; font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; }
.odl-order-summary .odl-promo { display: grid; gap: var(--ds-space-stack-xs); }
.odl-order-summary .odl-lab { color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-order-summary .odl-field { display: flex; gap: var(--ds-space-inline-xs); }
.odl-order-summary input { flex: 1; min-inline-size: 0; min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-input); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-field); color: var(--ds-color-text-primary);
  font: var(--ds-text-body-md); text-transform: uppercase; }
.odl-order-summary input::placeholder { color: var(--ds-color-text-tertiary); text-transform: none; }
.odl-order-summary input[aria-invalid="true"] { border-color: var(--ds-color-border-danger); }
.odl-order-summary .odl-apply { min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border: var(--ds-border-width-default) solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-order-summary .odl-apply:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-order-summary .odl-msg { margin: 0; color: var(--ds-color-text-danger); font: var(--ds-text-body-sm); }
.odl-order-summary .odl-msg:empty { display: none; }
.odl-order-summary .odl-chip { justify-self: start; display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding-inline-start: var(--ds-space-inset-sm);
  border-radius: var(--ds-radius-control-sm); background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); font: var(--ds-text-label-md); }
.odl-order-summary .odl-chip[hidden] { display: none; }
.odl-order-summary .odl-chip code { font: var(--ds-text-code-sm); font-weight: var(--ds-font-weight-label); }
.odl-order-summary .odl-chip svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-order-summary .odl-chip button { display: grid; place-items: center; min-inline-size: var(--ds-size-target-min); min-block-size: var(--ds-size-target-min); padding: 0; margin-block: calc(-1 * var(--ds-space-8));
  border: 0; border-radius: var(--ds-radius-full); background: transparent; color: inherit; cursor: pointer; }
.odl-order-summary .odl-chip button:hover { color: var(--ds-color-text-primary); }
.odl-order-summary dl { margin: 0; display: grid; gap: var(--ds-space-stack-xs); padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  font-variant-numeric: tabular-nums; }
.odl-order-summary dl div { display: flex; justify-content: space-between; gap: var(--ds-space-inline-md); }
.odl-order-summary dt { color: var(--ds-color-text-secondary); }
.odl-order-summary dd { margin: 0; text-align: end; }
.odl-order-summary .odl-off dd { color: var(--ds-color-text-success); }
.odl-order-summary .odl-off[hidden] { display: none; }
.odl-order-summary .odl-total { align-items: baseline; margin-block-start: var(--ds-space-stack-xs); padding-block-start: var(--ds-space-stack-sm); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-order-summary .odl-total dt { color: var(--ds-color-text-primary); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); }
.odl-order-summary .odl-total dd { font: var(--ds-text-numeric-md); font-weight: var(--ds-font-weight-heading); }
.odl-order-summary .odl-total dd small { margin-inline-start: var(--ds-space-4); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); }
.odl-order-summary .odl-pay { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); inline-size: 100%;
  min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border: 0; border-radius: var(--ds-radius-control);
  background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-heading); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-order-summary .odl-pay:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-order-summary .odl-pay:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-order-summary .odl-pay svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-order-summary .odl-fine { margin: calc(-1 * var(--ds-space-stack-sm)) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-align: center; text-wrap: balance; }
.odl-order-summary button:focus-visible, .odl-order-summary input:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 22rem) {
  .odl-order-summary .odl-card { padding: var(--ds-space-inset-md); }
  .odl-order-summary .odl-item { grid-template-columns: minmax(0, 1fr) auto; }
  .odl-order-summary .odl-thumb { display: none; }
  .odl-order-summary .odl-step { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .odl-order-summary, .odl-order-summary *, .odl-order-summary *::before { transition: none !important; animation: none !important; } }


.odl-product-card { box-sizing: border-box; inline-size: 100%; max-inline-size: 22.5rem; margin-inline: auto; container-type: inline-size; text-wrap: pretty; }
.odl-product-card *, .odl-product-card *::before { box-sizing: border-box; }
.odl-product-card .odl-card { display: grid; overflow: hidden; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-product-card .odl-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ds-color-bg-accent-subtle);
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-product-card .odl-cover::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, var(--ds-color-bg-accent-subtle-hover) 0 46%, transparent 46.5%), radial-gradient(circle at 50% 120%, var(--ds-color-bg-accent-subtle-pressed) 0 30%, transparent 30.5%); }
.odl-product-card .odl-cover svg { position: relative; inline-size: 74%; max-inline-size: 15rem; overflow: visible; }
.odl-product-card .odl-sheet { fill: var(--ds-color-surface-raised); stroke: var(--ds-color-border-subtle); stroke-width: 1; }
.odl-product-card .odl-sheet.is-back { fill: var(--ds-color-surface-sunken); }
.odl-product-card .odl-dot { fill: var(--ds-color-bg-accent-bold); }
.odl-product-card .odl-dot.is-muted { fill: var(--ds-color-border-default); }
.odl-product-card .odl-ln { fill: var(--ds-color-bg-neutral-subtle-pressed); }
.odl-product-card .odl-ln.is-strong { fill: var(--ds-color-border-strong); }
.odl-product-card .odl-seal { fill: var(--ds-color-bg-accent-bold); }
.odl-product-card .odl-seal-mark { fill: none; stroke: var(--ds-color-icon-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.odl-product-card .odl-tag { position: absolute; inset-block-start: var(--ds-space-inset-sm); inset-inline-start: var(--ds-space-inset-sm); display: inline-flex; align-items: center; min-block-size: var(--ds-size-control-sm); padding: 0 var(--ds-space-inset-xs);
  border-radius: calc(var(--ds-radius-container) - var(--ds-space-inset-sm)); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); font: var(--ds-text-label-sm); box-shadow: var(--ds-elevation-raised); }
/* The heart's visible circle lines up with the tag; its larger hit area hangs outside that circle. */
.odl-product-card .odl-fav { --odl-hang: calc((max(var(--ds-size-control-sm), var(--ds-size-target-min)) - var(--ds-size-control-sm)) / 2);
  position: absolute; inset-block-start: calc(var(--ds-space-inset-sm) - var(--odl-hang)); inset-inline-end: calc(var(--ds-space-inset-sm) - var(--odl-hang)); display: grid; place-items: center;
  inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ds-color-text-secondary); }
.odl-product-card .odl-fav span { display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-raised); box-shadow: var(--ds-elevation-raised); transition: color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-product-card .odl-fav:hover { color: var(--ds-color-text-primary); }
.odl-product-card .odl-fav svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-product-card .odl-fav[aria-pressed="true"] { color: var(--ds-color-text-danger); }
.odl-product-card .odl-fav[aria-pressed="true"] path { fill: currentColor; }
.odl-product-card .odl-body { display: grid; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) var(--ds-space-inset-lg); }
.odl-product-card .odl-kind { margin: 0; color: var(--ds-color-text-accent); font: var(--ds-text-label-md); }
.odl-product-card h3 { margin: 0; font: var(--ds-text-title-md); }
.odl-product-card .odl-desc { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-product-card .odl-rate { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-product-card .odl-rate b { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-product-card .odl-stars { display: inline-flex; gap: var(--ds-space-2); color: var(--ds-color-text-warning); }
.odl-product-card .odl-stars svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); fill: currentColor; }
.odl-product-card .odl-stars svg:last-child { fill: none; stroke: currentColor; stroke-width: 1.25; }
.odl-product-card .odl-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-stack-sm) var(--ds-space-inline-sm);
  margin-block-start: var(--ds-space-stack-xs); padding-block-start: var(--ds-space-stack-md); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-product-card .odl-price { display: grid; gap: var(--ds-space-2); font-variant-numeric: tabular-nums; }
.odl-product-card .odl-price p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-inline-xs); margin: 0; }
.odl-product-card .odl-price strong { font: var(--ds-text-numeric-md); font-weight: var(--ds-font-weight-heading); }
.odl-product-card .odl-price span { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-product-card .odl-price s { color: var(--ds-color-text-tertiary); font: var(--ds-text-body-sm); }
.odl-product-card .odl-save { padding: 0 var(--ds-space-6); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); font: var(--ds-text-label-sm); }
.odl-product-card .odl-add { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); min-inline-size: 6.5rem;
  min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border: var(--ds-border-width-default) solid transparent; border-radius: var(--ds-radius-control);
  background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-product-card .odl-add:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-product-card .odl-add:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-product-card .odl-add svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-product-card .odl-add .is-on, .odl-product-card .odl-add[aria-pressed="true"] .is-off { display: none; }
.odl-product-card .odl-add[aria-pressed="true"] .is-on { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-product-card .odl-add[aria-pressed="true"] { background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); border-color: var(--ds-color-border-success); }
.odl-product-card .odl-add .is-off { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-product-card button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-product-card .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 18rem) {
  .odl-product-card .odl-body { padding: var(--ds-space-inset-sm) var(--ds-space-inset-md) var(--ds-space-inset-md); }
  .odl-product-card .odl-add { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .odl-product-card, .odl-product-card *, .odl-product-card *::before { transition: none !important; animation: none !important; } }


.odl-article-card { box-sizing: border-box; position: relative; inline-size: 100%; max-inline-size: 760px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; overflow: hidden;
  transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-article-card *, .odl-article-card *::before, .odl-article-card *::after { box-sizing: border-box; }
.odl-article-card:hover { border-color: var(--ds-color-border-default); box-shadow: var(--ds-elevation-floating); }
.odl-article-card:has(.odl-link:focus-visible) { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-article-card .odl-inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.odl-article-card .odl-cover { display: block; inline-size: 100%; aspect-ratio: 2 / 1; border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-article-card .odl-cover .c-bg { fill: var(--ds-color-bg-accent-subtle); }
.odl-article-card .odl-cover .c-ring { fill: none; stroke: var(--ds-color-border-accent); stroke-width: 1; opacity: 0.55; }
.odl-article-card .odl-cover .c-sun { fill: var(--ds-color-bg-accent-bold); }
.odl-article-card .odl-cover .c-sheet { fill: var(--ds-color-surface-raised); stroke: var(--ds-color-border-subtle); stroke-width: 1; }
.odl-article-card .odl-cover .c-bar { fill: var(--ds-color-bg-neutral-subtle); }
.odl-article-card .odl-cover .c-bar-strong { fill: var(--ds-color-text-tertiary); }
.odl-article-card .odl-cover .c-chip { fill: var(--ds-color-bg-success-subtle); }
.odl-article-card .odl-cover .c-chip-dot { fill: var(--ds-color-bg-success-bold); }
.odl-article-card .odl-cover .c-tick { fill: none; stroke: var(--ds-color-icon-on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.odl-article-card .odl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-lg); }
.odl-article-card .odl-kicker { margin: 0; color: var(--ds-color-text-accent); font: var(--ds-text-label-md); letter-spacing: var(--ds-text-label-md-tracking); font-variant-numeric: tabular-nums; }
.odl-article-card .odl-kicker span { color: var(--ds-color-text-secondary); }
.odl-article-card h3 { margin: 0; font: var(--ds-text-title-lg); text-wrap: balance; }
.odl-article-card .odl-link { color: inherit; text-decoration: none; outline: none; }
.odl-article-card .odl-link::after { content: ""; position: absolute; inset: 0; }
.odl-article-card:hover .odl-link { text-decoration: underline; text-decoration-thickness: var(--ds-border-width-default); text-underline-offset: var(--ds-space-4); }
.odl-article-card .odl-dek { margin: 0; color: var(--ds-color-text-secondary); }
.odl-article-card footer { display: flex; align-items: center; gap: var(--ds-space-inline-sm); margin-block-start: var(--ds-space-stack-xs); padding-block-start: var(--ds-space-stack-sm);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-article-card .odl-initials { flex: none; display: grid; place-items: center; inline-size: var(--ds-size-control-sm); block-size: var(--ds-size-control-sm); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); font: var(--ds-text-label-md); font-weight: var(--ds-font-weight-heading); }
.odl-article-card .odl-byline { flex: 1; min-inline-size: 0; display: grid; font: var(--ds-text-body-sm); }
.odl-article-card .odl-byline strong { font-weight: var(--ds-font-weight-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odl-article-card .odl-byline time { color: var(--ds-color-text-tertiary); font-variant-numeric: tabular-nums; }
.odl-article-card .odl-save { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: var(--ds-size-target-min); padding: 0 var(--ds-space-inset-sm);
  border: var(--ds-border-width-default) solid var(--ds-color-border-default); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised);
  color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); cursor: pointer; transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-article-card .odl-save:hover { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-article-card .odl-save svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); fill: none; }
.odl-article-card .odl-save[aria-pressed="true"] { border-color: var(--ds-color-border-accent); background: var(--ds-color-bg-accent-subtle); color: var(--ds-color-text-accent); }
.odl-article-card .odl-save[aria-pressed="true"] svg { fill: currentColor; }
.odl-article-card .odl-save .odl-on { display: none; }
.odl-article-card .odl-save[aria-pressed="true"] .odl-on { display: inline; }
.odl-article-card .odl-save[aria-pressed="true"] .odl-off { display: none; }
.odl-article-card .odl-save:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (min-width: 34rem) {
  .odl-article-card .odl-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .odl-article-card .odl-cover { block-size: 100%; aspect-ratio: auto; min-block-size: 100%; border-block-end: 0; border-inline-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
  .odl-article-card .odl-body { align-content: center; padding: var(--ds-space-inset-xl); }
  .odl-article-card footer { margin-block-start: var(--ds-space-stack-sm); }
}
@container (max-width: 20rem) { .odl-article-card .odl-body { padding: var(--ds-space-inset-md); } }
@media (prefers-reduced-motion: reduce) { .odl-article-card, .odl-article-card *, .odl-article-card *::before, .odl-article-card *::after { transition: none !important; animation: none !important; } }


.odl-music-player { box-sizing: border-box; inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; container-type: inline-size; text-wrap: pretty; }
.odl-music-player *, .odl-music-player *::before { box-sizing: border-box; }
.odl-music-player .odl-card { --p: 45.92%; display: grid; gap: var(--ds-space-stack-md); padding: var(--ds-space-inset-lg); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); }
.odl-music-player .odl-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-inline-md); }
.odl-music-player .odl-art { inline-size: calc(var(--ds-size-control-lg) * 1.75); aspect-ratio: 1; border-radius: var(--ds-radius-nested); overflow: hidden; box-shadow: var(--ds-elevation-raised); }
.odl-music-player .odl-art svg { display: block; inline-size: 100%; block-size: 100%; }
.odl-music-player .odl-art .odl-bg { fill: var(--ds-color-accent-light-12); }
.odl-music-player .odl-art .odl-sun { fill: var(--ds-color-accent-light-3); }
.odl-music-player .odl-art .odl-stem { fill: none; stroke: var(--ds-color-accent-light-9); stroke-width: 1.6; stroke-linecap: round; }
.odl-music-player .odl-art .odl-leaf { fill: var(--ds-color-accent-light-8); }
.odl-music-player .odl-art .odl-soil { fill: var(--ds-color-accent-light-11); }
.odl-music-player .odl-meta { display: grid; gap: var(--ds-space-2); min-inline-size: 0; }
.odl-music-player .odl-eyebrow { margin: 0; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-music-player h3 { margin: 0; font: var(--ds-text-title-md); }
.odl-music-player .odl-by { display: flex; flex-wrap: wrap; column-gap: var(--ds-space-4); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-music-player .odl-by span { white-space: nowrap; }
.odl-music-player .odl-by .odl-album { color: var(--ds-color-text-tertiary); }
.odl-music-player button { display: grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
  padding: 0; border: 0; border-radius: var(--ds-radius-full); background: transparent; color: var(--ds-color-text-secondary); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-music-player button:hover { background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-primary); }
.odl-music-player button svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-music-player .odl-like[aria-pressed="true"] { color: var(--ds-color-text-accent); }
.odl-music-player .odl-like[aria-pressed="true"] path { fill: currentColor; }
.odl-music-player .odl-seek { position: relative; block-size: calc(var(--ds-size-control-lg) * 1.1); }
.odl-music-player .odl-wave { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.odl-music-player .odl-wave rect { fill: var(--ds-color-border-default); }
.odl-music-player .odl-wave.is-played { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.odl-music-player .odl-wave.is-played rect { fill: var(--ds-color-bg-accent-bold); }
.odl-music-player .odl-seek input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: var(--ds-radius-4); }
.odl-music-player .odl-seek input::-webkit-slider-runnable-track { block-size: 100%; background: transparent; }
.odl-music-player .odl-seek input::-moz-range-track { block-size: 100%; background: transparent; }
.odl-music-player .odl-seek input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--ds-border-width-emphasis); block-size: 100%; border: 0; border-radius: var(--ds-radius-full); background: var(--ds-color-text-primary); }
.odl-music-player .odl-seek input::-moz-range-thumb { inline-size: var(--ds-border-width-emphasis); block-size: 100%; border: 0; border-radius: var(--ds-radius-full); background: var(--ds-color-text-primary); }
.odl-music-player .odl-times { display: flex; justify-content: space-between; margin: calc(-1 * var(--ds-space-4)) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-music-player .odl-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ds-space-inline-sm); }
.odl-music-player .odl-transport { grid-column: 2; }
.odl-music-player .odl-volume { grid-column: 3; justify-self: end; }
.odl-music-player .odl-transport { display: flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-music-player .odl-play { min-inline-size: max(var(--ds-size-control-lg), var(--ds-size-target-min)); min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min));
  background: var(--ds-color-bg-accent-bold); color: var(--ds-color-text-on-accent); }
.odl-music-player .odl-play:hover { background: var(--ds-color-bg-accent-bold-hover); color: var(--ds-color-text-on-accent); }
.odl-music-player .odl-play:active { background: var(--ds-color-bg-accent-bold-pressed); }
.odl-music-player .odl-play .is-pause, .odl-music-player .odl-play.is-playing .is-play { display: none; }
.odl-music-player .odl-play.is-playing .is-pause { display: block; }
.odl-music-player .odl-volume { display: flex; align-items: center; gap: var(--ds-space-inline-xs); color: var(--ds-color-text-secondary); }
.odl-music-player .odl-volume svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-music-player .odl-volume input { --v: 70%; inline-size: 6.5rem; min-block-size: var(--ds-size-target-min); margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: var(--ds-radius-4); }
.odl-music-player .odl-volume input::-webkit-slider-runnable-track { block-size: var(--ds-space-4); border-radius: var(--ds-radius-full);
  background: linear-gradient(to right, var(--ds-color-text-secondary) var(--v), var(--ds-color-border-default) var(--v)); }
.odl-music-player .odl-volume input::-moz-range-track { block-size: var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); }
.odl-music-player .odl-volume input::-moz-range-progress { block-size: var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-color-text-secondary); }
.odl-music-player .odl-volume input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--ds-space-12); block-size: var(--ds-space-12); margin-block-start: calc((var(--ds-space-4) - var(--ds-space-12)) / 2);
  border: 0; border-radius: var(--ds-radius-full); background: var(--ds-color-text-primary); }
.odl-music-player .odl-volume input::-moz-range-thumb { inline-size: var(--ds-space-12); block-size: var(--ds-space-12); border: 0; border-radius: var(--ds-radius-full); background: var(--ds-color-text-primary); }
.odl-music-player button:focus-visible, .odl-music-player input:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-music-player .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Phone: the device's own buttons set the volume, so the slider goes and the transport sits centred. */
@container (max-width: 24rem) {
  .odl-music-player .odl-volume, .odl-music-player .odl-by [aria-hidden="true"] { display: none; }
  .odl-music-player .odl-by { flex-direction: column; }
}
@container (max-width: 22rem) {
  .odl-music-player .odl-card { padding: var(--ds-space-inset-md); }
  .odl-music-player .odl-art { inline-size: calc(var(--ds-size-control-lg) * 1.4); }
}
@media (prefers-reduced-motion: reduce) { .odl-music-player, .odl-music-player *, .odl-music-player *::before { transition: none !important; animation: none !important; } }


.odl-profile-card { box-sizing: border-box; inline-size: 100%; max-inline-size: 400px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; overflow: hidden; }
.odl-profile-card *, .odl-profile-card *::before { box-sizing: border-box; }
.odl-profile-card .odl-band { block-size: var(--ds-space-64); background: linear-gradient(120deg, var(--ds-color-bg-accent-subtle-pressed), var(--ds-color-bg-accent-subtle) 60%, var(--ds-color-surface-sunken));
  border-block-end: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-profile-card .odl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-md); padding: 0 var(--ds-space-inset-lg) var(--ds-space-inset-lg); }
.odl-profile-card .odl-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-stack-sm); }
.odl-profile-card .odl-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-inline-sm); margin-block-start: calc(-1 * var(--ds-space-32)); }
.odl-profile-card .odl-avatar { flex: none; display: grid; place-items: center; inline-size: var(--ds-space-64); block-size: var(--ds-space-64); border-radius: var(--ds-radius-person);
  background: var(--ds-color-bg-accent-bold); color: var(--ds-color-text-on-accent); font: var(--ds-text-title-md); font-weight: var(--ds-font-weight-heading);
  border: var(--ds-border-width-4) solid var(--ds-color-surface-raised); }
.odl-profile-card .odl-presence { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-2) var(--ds-space-8); border-radius: var(--ds-radius-full);
  background: var(--ds-color-bg-success-subtle); color: var(--ds-color-text-success); font: var(--ds-text-label-md); white-space: nowrap; }
.odl-profile-card .odl-presence::before { content: ""; inline-size: var(--ds-space-6); block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: currentColor; }
.odl-profile-card .odl-name { margin: 0; font: var(--ds-text-title-md); }
.odl-profile-card .odl-role { margin: var(--ds-space-2) 0 0; color: var(--ds-color-text-secondary); }
.odl-profile-card .odl-meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-inline-md); margin: var(--ds-space-stack-xs) 0 0; padding: 0; list-style: none;
  color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; }
.odl-profile-card .odl-meta li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-profile-card .odl-meta svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-profile-card .odl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); }
.odl-profile-card .odl-stats div { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-inset-sm) var(--ds-space-inset-sm); min-inline-size: 0; }
.odl-profile-card .odl-stats div + div { border-inline-start: var(--ds-border-width-default) solid var(--ds-color-border-subtle); }
.odl-profile-card .odl-stats dt { order: 2; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-profile-card .odl-stats dd { order: 1; margin: 0; font: var(--ds-text-numeric-md); font-weight: var(--ds-font-weight-heading); font-variant-numeric: tabular-nums; }
.odl-profile-card .odl-about { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-profile-card .odl-about strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-profile-card .odl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-inline-sm); }
.odl-profile-card button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-md); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-profile-card button svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-profile-card .odl-message { background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); border: var(--ds-border-width-default) solid var(--ds-color-bg-action-primary); }
.odl-profile-card .odl-message:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-profile-card .odl-message:active { background: var(--ds-color-bg-action-primary-pressed); }
.odl-profile-card .odl-follow { background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-default); }
.odl-profile-card .odl-follow:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-profile-card .odl-follow .odl-on { display: none; }
.odl-profile-card .odl-follow[aria-pressed="true"] { background: var(--ds-color-bg-accent-subtle); border-color: var(--ds-color-border-accent); color: var(--ds-color-text-accent); }
.odl-profile-card .odl-follow[aria-pressed="true"] .odl-on { display: inline; }
.odl-profile-card .odl-follow[aria-pressed="true"] .odl-off { display: none; }
.odl-profile-card button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 20rem) { .odl-profile-card .odl-body { padding-inline: var(--ds-space-inset-md); } .odl-profile-card .odl-stats div { padding-inline: var(--ds-space-inset-xs); } }
@media (prefers-reduced-motion: reduce) { .odl-profile-card, .odl-profile-card *, .odl-profile-card *::before { transition: none !important; animation: none !important; } }

/* The component library shop (/library/) and component pages (/library/<slug>/). Built from the site's own parts: the photo
   stage and glass bezel (home.css), stickers, filters, copy buttons, tabs and buttons (site.css). The components inside are
   styled only by their own --ds-* tokens. */
.shop { max-width: var(--shell); margin-inline: auto; padding: 40px 24px 96px; }

/* top bar: title, one line, search */
/* the top: centred, like a store's front page (refs on Mobbin: v0 templates, Langdock, Figma Community); the home page's type */
.shop-hero { display: grid; justify-items: center; gap: 18px; padding: 40px 0 8px; text-align: center; }
.shop-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.shop-hero h1 { margin: 0; max-width: 16em; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
.shop-hero h1 strong { font-weight: 600; }
.shop-sub { margin: 0; max-width: 46ch; font-size: 18px; line-height: 28px; color: var(--ink-muted); text-wrap: pretty; }
.shop-pop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.shop-pop > span { margin-right: 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.shop-pop .filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* one rhythm for every section: 64 px apart, a head of a title and one line, 20 px to the content */
.shop-sec { margin-top: 64px; }
.sec-head { margin-bottom: 20px; }
.sec-head h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.sec-head p { margin: 4px 0 0; max-width: 64ch; font-size: 15px; line-height: 22px; color: var(--ink-muted); text-wrap: pretty; }
.sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.shop-search { position: relative; display: flex; align-items: center; width: min(100%, 600px); margin-top: 10px; min-width: 0; }
.shop-search svg { position: absolute; left: 18px; color: var(--ink-muted); pointer-events: none; }
.shop-search input { width: 100%; min-height: 56px; padding: 0 20px 0 48px;  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-raised);
  color: var(--ink); font: 500 15px/20px "Hanken Grotesk", system-ui, sans-serif; box-shadow: 0 1px 2px rgb(10 14 40 / .05); }
.shop-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the bento of aisles */
.aisles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 16px; }
.aisle { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-sunken); color: var(--ink); text-decoration: none;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 220ms ease, border-color 160ms ease; }
.aisle.c2 { grid-column: span 2; } .aisle.r2 { grid-row: span 2; }
.aisle:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 18px 36px -24px rgb(10 14 40 / .45); }
.aisle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.aisle { --tile-r: var(--r-panel); }
.aisle-prev { position: relative; margin: 14px 14px 0; min-height: 0; overflow: hidden; border-radius: calc(var(--tile-r) - 14px);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.aisle-prev { display: grid; align-content: start; gap: 12px; }
.aisle-prev .lib-fit { justify-items: start; }
.aisle-txt { display: grid; align-content: start; gap: 2px; height: 68px; box-sizing: border-box; padding: 12px 18px 0; }
.aisle-txt span { white-space: nowrap; }
.aisle-txt strong { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; }
.aisle-txt span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.aisle .aisle-sw { display: grid; grid-template-columns: repeat(5, 28px); justify-content: center; align-content: center; gap: 12px; -webkit-mask-image: none; mask-image: none; background: var(--surface-raised); }
.aisle-sw .look-sw { width: 28px; height: 28px; }

/* looks: a swatch drawn from each look's own tokens (its action colour and its control corner) */
.look-sw { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; box-sizing: border-box;
  background: var(--ds-color-bg-action-primary); border-radius: min(var(--ds-radius-control), 999px); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(20 21 23 / .14); }
.look-sw i { width: 40%; height: 40%; border-radius: inherit; background: var(--ds-color-bg-accent-subtle); }
.part-more h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.looks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.look { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-raised); color: var(--ink); font: 500 14px/20px "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.look:hover { border-color: var(--line-strong); }
.look[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.look:focus-visible, .look-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.look-add { gap: 6px; }

/* the shelf */
.shelf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-filters .filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shelf-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.lib-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* one select style: our own chevron, 12 px in from the edge, with the text 14 px from the left; the native arrow sat against
   the edge with uneven padding (owner, 2026-10-21) */
.lib-field select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 38px 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23575a63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
  color: var(--ink); font: 500 14px/20px "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; transition: border-color 160ms ease; }
.lib-field select:hover { border-color: var(--line-strong); }
.lib-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shelf-count { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.shelf-count .n { color: var(--ink); font-weight: 600; }
.lib-none { margin: 24px 0 0; font-size: 15px; color: var(--ink-muted); }

.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 24px; }
/* one tile size for every part (owner rule: tiles of one size in a grid); a wide part shows the view where it fills its tile */
/* one calm backdrop: a smooth gradient in the site's blues, never a streaked photo (post-change audit, rule 8) */
.lib-bg { background: radial-gradient(120% 90% at 18% 12%, #cfe0ff 0%, rgb(207 224 255 / 0) 60%), radial-gradient(90% 80% at 88% 92%, #b9c8f5 0%, rgb(185 200 245 / 0) 62%), linear-gradient(160deg, #e6eeff 0%, #c9d6f7 55%, #aebde9 100%); }
.item { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding-bottom: 48px; }
.item[hidden] { display: none; }
/* nested corners: the bezel's radius is the stage's minus the stage padding, the picture's is the bezel's minus its 6 px rim */
.item-media { --pad: calc(var(--r-panel) + 4px); aspect-ratio: 4 / 3;  /* padding a little over its own corner, so the rim never sits tight in it */ padding: var(--pad); display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; }
/* every bezel fills its stage, so all frames match; the part inside is laid out at a card width and fitted to it */
/* the frame hugs what it holds (owner, 2026-10-21: "it should adapt to the internal component"): the bezel takes the part's size, centred on the stage */
.item-in { --in-r: calc(var(--r-panel) - var(--pad)); box-sizing: border-box; width: auto; height: auto; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: var(--in-r); }
.item-in .lib-fit { align-content: start; justify-items: center; overflow: hidden; border-radius: calc(var(--in-r) - 6px); background: var(--ds-color-surface-base, #fff); }
.item-in .lib-live { border-radius: 0; padding: 16px; }
.item-body { padding-top: 14px; }
.item-body .item-tags { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.item-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* which view the card shows: the same three as the component page, outlined, the one on show filled */
.item-views { display: inline-flex; align-items: flex-end; gap: 4px; margin-left: auto; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.item-views i { display: block; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; opacity: .45; transition: opacity 160ms ease, background-color 160ms ease; }
.item-views i[data-v="desktop"] { width: 15px; height: 10px; } .item-views i[data-v="tablet"] { width: 9px; height: 12px; } .item-views i[data-v="phone"] { width: 7px; height: 12px; }
.item-views i.is-on { opacity: 1; background: currentColor; }
.item-view-t { margin-left: 4px; min-width: 7ch; }
/* a soft change of view (Emil Kowalski): fade and a 2 px blur, out fast, in a little slower, ease-out */
.item-body h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.item-link { color: var(--ink); text-decoration: none; }
.item-link::after { content: ""; position: absolute; inset: 0 0 40px; z-index: 1; border-radius: var(--r-panel); }
.item-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-link:focus-visible { outline: none; }
.item-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.item:has(.item-link:hover) .item-media { box-shadow: 0 22px 44px -28px rgb(10 14 40 / .55); }
.item-body p { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); letter-spacing: -0.012em; text-wrap: pretty; }
.item-acts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 16px; }
.item-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--ink-muted); font: 600 14px/20px "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.item-copy:hover { color: var(--ink); background: var(--surface-sunken); }

/* live components, scaled to fit their box by library.js (zoom keeps layout honest) */
.lib-fit { display: grid; justify-items: center; max-width: 100%; }
.lib-live { box-sizing: border-box; display: grid; justify-items: center; width: 100%; padding: 20px; border-radius: calc(12px * var(--corner-k, 1));
  background: var(--ds-color-surface-base); color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-align: start; letter-spacing: normal; }
.lib-live > * { justify-self: stretch; margin-inline: auto; }

/* add to kit */
.kit-add { white-space: nowrap; min-height: 40px; padding: 0 16px 0 12px; gap: 6px; font-size: 14px; background: var(--ink); border-color: var(--ink); color: #fff; }
.kit-add:hover { background: #2a2c31; }
.kit-add .t-in { display: none; }
.kit-add[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
.kit-add[aria-pressed="true"] .t-add { display: none; } .kit-add[aria-pressed="true"] .t-in { display: inline; }
.kit-add[aria-pressed="true"] svg { transform: rotate(45deg); }
.kit-add svg { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.kit-add:focus-visible, .item-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.part-acts .copy { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

/* how it works */
.how { padding-top: 48px; border-top: 1px solid var(--line); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how-steps > li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); min-width: 0; }
.how-steps .num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 14px; }
.how-steps h3 { margin: 4px 0 4px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; }
.how-steps p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); text-wrap: pretty; }
.how .h-fine { max-width: none; margin-top: 20px; }

/* the floating kit button */
.kit-fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px 0 18px;
  border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 15px/20px "Hanken Grotesk", system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 2px 4px rgb(10 14 40 / .16), 0 18px 36px -12px rgb(10 14 40 / .5); transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.kit-fab:hover { transform: translateY(-2px); }
.kit-fab:active { transform: scale(0.97); }
.kit-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kit-fab[hidden], .kit-fab.is-empty { display: none; }
.kit-n { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box; border: 3px solid #fff; border-radius: var(--r-pill);
  background: #d4f53c; color: #1a2200; font-size: 14px; transform: rotate(-4deg); }
.kit-fab.bump .kit-n { animation: kit-bump 420ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes kit-bump { 40% { transform: rotate(4deg) scale(1.25); } }

/* the kit, as a checkout (owner, 2026-10-21: premium, like a Razorpay or Dodo Payments checkout). One card in the middle of the
   screen: your order on a soft surface on the left, how to get it on white on the right, one big dark button. Nested corners:
   the card is 24 px, the panes inside it are flush, the method tiles and prompt box sit 24 px in and use 12 px. */
.kit { box-sizing: border-box; width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0;
  border-radius: 24px; background: var(--surface-raised); color: var(--ink); overflow: hidden;
  box-shadow: 0 0 0 1px rgb(20 21 23 / .06), 0 24px 64px -16px rgb(10 14 40 / .35); }
.kit[open] { display: block; animation: kit-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes kit-in { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.kit::backdrop { background: rgb(10 14 40 / .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.co-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); height: min(760px, calc(100dvh - 48px)); }
#kit-h:focus { outline: none; }
.co-order { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 28px; background: var(--surface-sunken); border-right: 1px solid var(--line); overflow-y: auto; }
.co-brand { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.co-logo .lockup { display: block; height: 22px; width: auto; }
.co-order h2 { margin: 8px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.kit-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--ink); font-size: 22px; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line); }
.kit-x:focus-visible, .kit-rm:focus-visible, .co-method:focus-visible, .kit-prompt:focus-visible, .co-pay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-empty { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.kit-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kit-items:empty { display: none; }
.kit-items li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kit-items li:first-child { padding-top: 4px; }
.kit-thumb { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); }
.kit-thumb-in { display: block; padding: 16px; border-radius: 0; background: var(--ds-color-surface-base); }
.kit-thumb { cursor: zoom-in; }
.kit-peek { position: fixed; z-index: 5; width: 316px; max-height: min(440px, calc(100dvh - 32px)); overflow: hidden; padding: 8px; box-sizing: border-box; pointer-events: none;
  border-radius: 20px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgb(10 14 40 / .35);
  opacity: 0; transform: scale(.96); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.kit-peek.is-open { opacity: 1; transform: none; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.kit-peek .lib-live { display: block; padding: 16px; border-radius: 12px; }
.kit-peek-n { display: block; padding: 8px 8px 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.co .k-name { display: grid; gap: 2px; min-width: 0; }
.co .k-name strong { font-size: 15px; line-height: 20px; font-weight: 600; }
.co .k-name small { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.co-next[hidden], .co-star[hidden] { display: none; }
.co-order .kit-clear { justify-self: start; padding-inline: 0; }
.kit-look .look-add-in { justify-self: start; }
.kit-rm { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; font-size: 18px; }
.kit-rm:hover { background: var(--surface-raised); color: var(--ink); }
.kit-look:empty { display: none; }
.kit-look { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kit-look .look-sw { width: 56px; height: 56px; box-shadow: none; border-radius: 10px; }
.kit-look .look-sw i { width: 36%; height: 36%; border-radius: 4px; }
.kit-look a, .kit-look .kit-rm-look { font-size: 14px; }
.co-sum { margin: 4px 0 0; display: grid; gap: 8px; font-size: 14px; line-height: 20px; }
.co-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.co-sum dt { color: var(--ink-muted); }
.co-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; line-height: 22px; }
.co-sum .co-total dt { color: var(--ink); font-weight: 600; }
.co-total dd { font-weight: 700; }
.co-total small { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
.co-get { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 28px; overflow-y: auto; }
.co-get h3 { margin: 12px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.co-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.co-method { display: grid; align-content: start; gap: 10px; min-height: 96px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised);
  color: var(--ink); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.co-method:hover { border-color: var(--line-strong); }
.co-method[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.co-m-ic { display: flex; gap: 6px; min-height: 20px; color: var(--ink); }
.co-m-ic .m-sw { width: 18px; height: 18px; border-radius: 6px; background: conic-gradient(#e0457b 0 25%, #1e3a8a 0 50%, #15803d 0 75%, #d92d20 0); }
.co-m-t { display: grid; gap: 2px; }
.co-m-t strong { font-size: 14px; line-height: 18px; font-weight: 600; }
.co-m-t span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.co-label { margin: 0 0 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 500; }
.kit-prompt { margin: 0; max-height: 168px; overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken);
  font: 13px/20px "Source Code Pro", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.co-pay { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: var(--ink); color: #fff;
  font: 600 16px/22px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -0.01em; cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease; }
.co-pay:hover { background: #2a2c31; }
.co-pay:active { transform: scale(0.99); }
.co-pay.is-done { background: #15803d; }
.co-pay svg { width: 18px; height: 18px; }
.co-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.co-trust svg { color: #15803d; flex: none; }
.co-next { margin: 0; padding: 14px 16px 14px 34px; border-radius: 12px; background: var(--surface-sunken); font-size: 14px; line-height: 21px; display: grid; gap: 4px; }
.co-star { display: grid; gap: 12px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.co-star p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); text-wrap: pretty; }
.co-star p strong { color: var(--ink); }
.co-star-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.co-star-acts .btn.secondary { gap: 8px; }
.co-stars:empty { display: none; }
.co-stars { padding-left: 8px; border-left: 1px solid currentColor; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .kit { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .co-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; max-height: 100dvh; height: 100dvh; overflow-y: auto; }
  .co-order { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; padding: 20px; }
  .co-get { overflow: visible; padding: 20px 20px 32px; }
  .co-get h3 { margin-top: 0; }
  .co-methods { grid-template-columns: minmax(0, 1fr); }
  .co-method { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}

/* a component's own page */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-bottom: 20px; }
.crumbs a { color: var(--ink-muted); }
.part-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.part-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.part-devices { gap: 6px; }
.part-devices [role="tab"] { white-space: nowrap; }
.part-devices [role="tab"] .num { opacity: .7; font-weight: 400; font-size: 12px; }
.part-devices [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.part-stage { min-height: 0; padding: clamp(16px, 4%, 40px); place-items: center; }
/* one frame language across the site (owner, 2026-10-21: "outside it is glassmorphism, inside it is black"): every device is the
   same frosted-glass rim as the cards and the home page's screens; only its width tells phone, tablet and desktop apart */
.part-device { --rim: 6px; position: relative; z-index: 2; box-sizing: content-box; max-width: 100%; padding: var(--rim); border-radius: 26px;
  background: rgb(255 255 255 / .34); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 2px 4px rgb(10 14 40 / .12), 0 32px 64px -28px rgb(10 14 40 / .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.part-frame { overflow: hidden; border-radius: calc(26px - var(--rim)); background: var(--surface-raised); }
.part-frame .lib-live { border-radius: 0; min-height: 100%; padding: 12px; align-content: start; }
/* corners nest: each inner radius is the outer one minus the gap or bezel between them, and all share the site's corner shape */
/* the frames are computed from the part inside, so they share its plain round corner */
@supports (corner-shape: superellipse(1.35)) { .item-in, .item-in .lib-fit, .part-stage, .part-device, .part-frame, .aisle, .aisle-prev { corner-shape: round; --corner-k: 1; } }
.part-hint { margin: 10px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.part-side { position: sticky; top: 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.part-side h1 { margin: 4px 0 0; font-size: 32px; line-height: 38px; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.part-sum { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); text-wrap: pretty; }
.part-prompt { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); }
.part-prompt .kicker { margin: 0 0 8px; }
.part-prompt-text { margin: 0; font: 13px/20px "Source Code Pro", ui-monospace, monospace; color: var(--ink); overflow-wrap: anywhere; }
.part-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.part-side .cmd { margin: 0; max-width: none; }
.part-cmd-note { margin: -6px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.part-facts { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.part-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.part-facts dt { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.part-facts dd { margin: 0; font-size: 14px; line-height: 20px; text-wrap: pretty; overflow-wrap: anywhere; }
.part-states { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.part-states li { padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: 13px; line-height: 22px; white-space: nowrap; }
.part-src { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-raised); }
.part-src summary { min-height: 48px; display: flex; align-items: center; padding: 0 20px; cursor: pointer; font-weight: 600; }
.part-src summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-panel); }
.part-src pre { margin: 0; padding: 0 20px 20px; max-height: 480px; overflow-y: auto; font: 12px/19px "Source Code Pro", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.part-more { margin-top: 56px; }
.part-more h2 { margin-bottom: 20px; }

@media (max-width: 1100px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-grid { grid-template-columns: minmax(0, 1fr); }
  .part-side { position: static; }
}
@media (max-width: 1100px) {
  .aisles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
}
@media (max-width: 900px) {
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .shop { padding: 24px 16px 96px; }
  .shop-hero { padding-top: 16px; }
  .shop-sub { font-size: 16px; line-height: 24px; }
  .aisles { grid-auto-rows: 168px; gap: 8px; }
  .aisle-txt { padding: 10px 12px 0; height: 62px; }
  .aisle-txt strong { font-size: 16px; line-height: 22px; }
  .aisle-prev { margin: 10px 10px 0; }
  .aisle-txt span { font-size: 12px; line-height: 16px; }
  .part-devices [data-device="desktop"] { display: none; }
  .aisle .aisle-sw { grid-template-columns: repeat(5, 22px); gap: 8px; }
  .aisle-sw .look-sw { width: 22px; height: 22px; }
  .items { grid-template-columns: minmax(0, 1fr); }
  /* one column: a card is as tall as its part (capped, cropped at the bottom only), not a fixed 4:3 box */
  .item-media { aspect-ratio: auto; }
  .shelf-count { margin-left: 0; }
  .looks-row { justify-content: flex-start; }
  .part-stage { min-height: 0; padding: 12px; border-radius: 40px; }

  .kit-fab { right: 16px; bottom: 16px; }
}
@media (max-width: 400px) {
  /* two columns of aisles on a phone: ten stacked tiles were 1,500 px of scrolling before the parts */
  .aisles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .aisle-txt span { display: none; }
  .aisle-txt { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .aisle, .aisle:hover, .kit-fab, .kit-fab:hover { transition: none; transform: none; }
  .kit[open], .kit-fab.bump .kit-n { animation: none; }
  .co-method, .co-pay, .kit-peek { transition: none; }
  .item-in .lib-live, .part-frame .lib-live, .item-views i { transition: none; }
  .kit-add svg { transition: none; }
}

.item-in .lib-fit.is-cropped { align-content: start; }

/* checkout: step 1 for Claude Code, and a bar that keeps the total and Copy in reach on a phone (post-change audit, rules 17-18) */
.co-step1 { display: grid; gap: 10px; }
.co-step1[hidden] { display: none; }
.kit-cmd { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken);
  font: 13px/20px "Source Code Pro", ui-monospace, monospace; white-space: pre; overflow-x: auto; color: var(--ink); }
.kit-copy-cmd { justify-self: start; gap: 8px; }
.kit-copy-cmd svg { width: 16px; height: 16px; }
.co-bar { display: none; }
@media (max-width: 760px) {
  .co-card { grid-template-rows: auto auto auto; }
  .co-get > .co-pay { display: none; }
  .co-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .co-bar-t { flex: none; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
  .co-bar-t strong { color: var(--ink); font-size: 16px; }
  .co-bar .co-pay { flex: 1; min-height: 48px; }
}
.part-prompt-text { overflow-wrap: break-word; }
/* the install command wraps at spaces in the narrow side panel, so it reads whole; two lines take the container corner (rule 9) */
.part-side .cmd { align-items: flex-start; border-radius: 12px; }
.part-side .cmd code { overflow-x: visible; white-space: normal; overflow-wrap: break-word; padding-block: 7px; line-height: 20px; }
/* the total stays in view at the bottom of a long order, like a payments checkout */
.co-order .co-sum { position: sticky; bottom: -28px; margin-bottom: -28px; padding: 12px 0 28px; background: var(--surface-sunken); box-shadow: 0 -1px 0 var(--line), 0 -20px 16px -4px var(--surface-sunken); }
@media (max-width: 760px) { .co-order .co-sum { position: static; margin-bottom: 0; padding: 0; box-shadow: none; } }