/* generated from tokens/tokens.css */
.stage[data-scheme], .stage[data-theme] {
  --oc-base-color-white: var(--oc-base-color-white-100,#fff);
  --oc-base-breakpoint-l: 48rem;
  --oc-base-breakpoint-m: 28rem;
  --oc-base-breakpoint-s: 22.5rem;
  --oc-base-breakpoint-xl: 62rem;
  --oc-base-breakpoint-xxl: 77rem;
  --oc-base-color-beige-100: #e9d4bf;
  --oc-base-color-beige-110: #d8bda4;
  --oc-base-color-beige-140: #603117;
  --oc-base-color-beige-70: #fff9f0;
  --oc-base-color-beige-80: #fff5e6;
  --oc-base-color-beige-90: #f5e6d7;
  --oc-base-color-black-100: #212121;
  --oc-base-color-black-lighten-10: #3a3a3a;
  --oc-base-color-black-lighten-15: #474747;
  --oc-base-color-black-lighten-20: #545454;
  --oc-base-color-black-lighten-25: #616161;
  --oc-base-color-black-lighten-30: #6d6d6d;
  --oc-base-color-black-lighten-45: #949494;
  --oc-base-color-black-lighten-5: #2e2e2e;
  --oc-base-color-black-lighten-61: #bdbdbd;
  --oc-base-color-black-lighten-67: #ccc;
  --oc-base-color-black-lighten-71: #d6d6d6;
  --oc-base-color-black-lighten-77: #e5e5e5;
  --oc-base-color-black-lighten-81: #f0f0f0;
  --oc-base-color-black-lighten-84: #f7f7f7;
  --oc-base-color-black-opacity-0: #21212100;
  --oc-base-color-black-opacity-10: #2121211a;
  --oc-base-color-black-opacity-3: #21212108;
  --oc-base-color-black-opacity-40: #21212166;
  --oc-base-color-black-opacity-5: #2121210d;
  --oc-base-color-black-opacity-50: #21212180;
  --oc-base-color-black-opacity-6: #2121210f;
  --oc-base-color-black-opacity-70: #212121b3;
  --oc-base-color-blue-100: #6ea0eb;
  --oc-base-color-blue-110: #266bd3;
  --oc-base-color-blue-120: #2e5aae;
  --oc-base-color-blue-130: #1e5a78;
  --oc-base-color-blue-140: #14374b;
  --oc-base-color-blue-70: #f0faff;
  --oc-base-color-blue-80: #dcf0fa;
  --oc-base-color-blue-90: #c5eaff;
  --oc-base-color-corporate-color-spectrum-coral-100: #ff9196;
  --oc-base-color-corporate-color-spectrum-coral-150: #d25a5f;
  --oc-base-color-corporate-color-spectrum-coral-200: #bc3339;
  --oc-base-color-corporate-color-spectrum-coral-25: #ffe2e2;
  --oc-base-color-corporate-color-spectrum-coral-50: #ffafaf;
  --oc-base-color-corporate-color-spectrum-cozy-pink-100: #ffbef5;
  --oc-base-color-corporate-color-spectrum-cozy-pink-150: #f578cd;
  --oc-base-color-corporate-color-spectrum-cozy-pink-50: #ffd7f5;
  --oc-base-color-corporate-color-spectrum-deep-navy-100: #1e5a78;
  --oc-base-color-corporate-color-spectrum-deep-navy-150: #14374b;
  --oc-base-color-corporate-color-spectrum-deep-navy-50: #287396;
  --oc-base-color-corporate-color-spectrum-denim-100: #6ea0eb;
  --oc-base-color-corporate-color-spectrum-denim-125: #4a88e6;
  --oc-base-color-corporate-color-spectrum-denim-150: #374bc8;
  --oc-base-color-corporate-color-spectrum-denim-25: #deedff;
  --oc-base-color-corporate-color-spectrum-denim-50: #78b4ff;
  --oc-base-color-corporate-color-spectrum-natural-beige-100: #f5e6d7;
  --oc-base-color-corporate-color-spectrum-natural-beige-150: #dcbe96;
  --oc-base-color-corporate-color-spectrum-natural-beige-50: #fff5e6;
  --oc-base-color-corporate-color-spectrum-positive-green-100: #64c8b9;
  --oc-base-color-corporate-color-spectrum-positive-green-150: #00aa9b;
  --oc-base-color-corporate-color-spectrum-positive-green-175: #009b8d;
  --oc-base-color-corporate-color-spectrum-positive-green-200: #007268;
  --oc-base-color-corporate-color-spectrum-positive-green-25: #d1ede7;
  --oc-base-color-corporate-color-spectrum-positive-green-50: #b4e1d7;
  --oc-base-color-corporate-color-spectrum-sky-blue-100: #dcf0fa;
  --oc-base-color-corporate-color-spectrum-sky-blue-150: #98c9f1;
  --oc-base-color-corporate-color-spectrum-sky-blue-50: #f0faff;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-100: #fffaaf;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-125: #ffeb91;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-150: #ffdc73;
  --oc-base-color-corporate-color-spectrum-sunny-yellow-50: #ffffcd;
  --oc-base-color-corporate-color-spectrum-warm-red-100: #8c2d4b;
  --oc-base-color-corporate-color-spectrum-warm-red-150: #6e1937;
  --oc-base-color-corporate-color-spectrum-warm-red-50: #c82864;
  --oc-base-color-error-red-100: #b30023;
  --oc-base-color-error-red-25: #ffe2e2;
  --oc-base-color-error-red-50: #f78ca1;
  --oc-base-color-error-red-75: #e64b69;
  --oc-base-color-gray-100: var(--oc-base-color-black-lighten-77);
  --oc-base-color-gray-150: var(--oc-base-color-black-lighten-67);
  --oc-base-color-gray-200: var(--oc-base-color-black-lighten-45);
  --oc-base-color-gray-25: var(--oc-base-color-black-lighten-81);
  --oc-base-color-gray-400: var(--oc-base-color-black-lighten-30);
  --oc-base-color-green-100: #a9e034;
  --oc-base-color-green-110: #8abc20;
  --oc-base-color-green-120: #6a9807;
  --oc-base-color-green-130: #5e8114;
  --oc-base-color-green-140: #456501;
  --oc-base-color-green-70: #e7ffb5;
  --oc-base-color-green-80: #dbfb98;
  --oc-base-color-green-90: #c5ef6c;
  --oc-base-color-hint-purple-100: #7d00ea;
  --oc-base-color-hint-purple-25: #eee5ff;
  --oc-base-color-hint-purple-50: #cb96fa;
  --oc-base-color-hint-purple-75: #a85de8;
  --oc-base-color-interactive-blue-100: #2366cb;
  --oc-base-color-interactive-blue-25: #dcf2ff;
  --oc-base-color-interactive-blue-50: #47bbff;
  --oc-base-color-interactive-blue-75: #418ade;
  --oc-base-color-interactive-blue-darken-10: #1d54a7;
  --oc-base-color-interactive-blue-darken-15: #1a4991;
  --oc-base-color-interactive-blue-darken-20: #163e7b;
  --oc-base-color-interactive-blue-darken-5: #215fbc;
  --oc-base-color-interactive-blue-lighten-10: #4b86df;
  --oc-base-color-interactive-blue-lighten-25: #53bfff;
  --oc-base-color-interactive-blue-lighten-35: #86d2ff;
  --oc-base-color-interactive-blue-lighten-45: #b9e5ff;
  --oc-base-color-interactive-blue-lighten-55: #dcf2ff;
  --oc-base-color-mint-100: #64c8b9;
  --oc-base-color-mint-110: #099f91;
  --oc-base-color-mint-120: #028a7e;
  --oc-base-color-mint-130: #006058;
  --oc-base-color-mint-140: #194743;
  --oc-base-color-mint-70: #d1ede7;
  --oc-base-color-mint-80: #b4e1d7;
  --oc-base-color-mint-90: #7dd4c7;
  --oc-base-color-orange-100: #f8a171;
  --oc-base-color-orange-110: #eb8f5c;
  --oc-base-color-orange-120: #e77433;
  --oc-base-color-orange-130: #e95d21;
  --oc-base-color-orange-140: #bf430d;
  --oc-base-color-orange-70: #ffe2d2;
  --oc-base-color-orange-80: #ffc5a5;
  --oc-base-color-orange-90: #ffb084;
  --oc-base-color-otto-red-100: #eb001f;
  --oc-base-color-otto-red-125: #dc001d;
  --oc-base-color-otto-red-darken-10: #b80018;
  --oc-base-color-otto-red-darken-20: #850012;
  --oc-base-color-otto-red-darken-3: #dc001d;
  --oc-base-color-otto-red-darken-4: #dc001d;
  --oc-base-color-pink-100: #e89fdd;
  --oc-base-color-pink-110: #b060b7;
  --oc-base-color-pink-120: #93319c;
  --oc-base-color-pink-130: #801489;
  --oc-base-color-pink-140: #63056b;
  --oc-base-color-pink-70: #ffeffb;
  --oc-base-color-pink-80: #ffd7f5;
  --oc-base-color-pink-90: #ffbef5;
  --oc-base-color-purple-100: #b198db;
  --oc-base-color-purple-110: #9c7fcb;
  --oc-base-color-purple-120: #7e63ca;
  --oc-base-color-purple-130: #6c49cf;
  --oc-base-color-purple-140: #522eb7;
  --oc-base-color-purple-70: #f4eeff;
  --oc-base-color-purple-80: #e5d5fe;
  --oc-base-color-purple-90: #c5afe9;
  --oc-base-color-service-blue-100: #76a6c6;
  --oc-base-color-service-blue-110: #538fb7;
  --oc-base-color-service-blue-120: #3f7498;
  --oc-base-color-service-blue-130: #305873;
  --oc-base-color-service-blue-140: #213d4f;
  --oc-base-color-service-blue-80: #c1daeb;
  --oc-base-color-success-green-100: #227642;
  --oc-base-color-success-green-25: #d3eedd;
  --oc-base-color-success-green-50: #67bd88;
  --oc-base-color-success-green-75: #3e935e;
  --oc-base-color-sustainable-green-100: #7ea87b;
  --oc-base-color-sustainable-green-110: #7ea87b;
  --oc-base-color-sustainable-green-120: #658c62;
  --oc-base-color-sustainable-green-125: #63915f;
  --oc-base-color-sustainable-green-130: #50734d;
  --oc-base-color-sustainable-green-140: #3c5939;
  --oc-base-color-sustainable-green-70: #e5fbe3;
  --oc-base-color-sustainable-green-80: #bfecbb;
  --oc-base-color-sustainable-green-darken-10: #63915f;
  --oc-base-color-sustainable-green-darken-15: #588155;
  --oc-base-color-sustainable-green-darken-20: #4e724b;
  --oc-base-color-warm-red-100: #e85f80;
  --oc-base-color-warm-red-110: #de3e64;
  --oc-base-color-warm-red-120: #c82864;
  --oc-base-color-warm-red-130: #8c2d4b;
  --oc-base-color-warm-red-140: #6e1937;
  --oc-base-color-warm-red-70: #ffe2e2;
  --oc-base-color-warm-red-80: #fec5c6;
  --oc-base-color-warm-red-90: #ff9196;
  --oc-base-color-warning-orange-100: #ae4518;
  --oc-base-color-warning-orange-25: #fee3d3;
  --oc-base-color-warning-orange-50: #ff8e5d;
  --oc-base-color-warning-orange-75: #e35316;
  --oc-base-color-white-100: #fff;
  --oc-base-color-white-opacity-0: #fff0;
  --oc-base-color-white-opacity-10: #ffffff1a;
  --oc-base-color-white-opacity-20: #fff3;
  --oc-base-color-white-opacity-3: #ffffff08;
  --oc-base-color-white-opacity-5: #ffffff0d;
  --oc-base-color-yellow-100: #ffdc73;
  --oc-base-color-yellow-110: #f3c640;
  --oc-base-color-yellow-120: #b4890a;
  --oc-base-color-yellow-130: #9e790d;
  --oc-base-color-yellow-140: #8d6b06;
  --oc-base-color-yellow-70: #ffffcd;
  --oc-base-color-yellow-80: #fffaaf;
  --oc-base-color-yellow-90: #ffeb91;
  --oc-base-dimension-0: 0px;
  --oc-base-dimension-12: 12px;
  --oc-base-dimension-16: 16px;
  --oc-base-dimension-2: 2px;
  --oc-base-dimension-20: 20px;
  --oc-base-dimension-24: 24px;
  --oc-base-dimension-32: 32px;
  --oc-base-dimension-4: 4px;
  --oc-base-dimension-40: 40px;
  --oc-base-dimension-48: 48px;
  --oc-base-dimension-56: 56px;
  --oc-base-dimension-64: 64px;
  --oc-base-dimension-72: 72px;
  --oc-base-dimension-8: 8px;
  --oc-base-dimension-80: 80px;
  --oc-base-dimension-absolute-0: 0px;
  --oc-base-dimension-absolute-12: 12px;
  --oc-base-dimension-absolute-16: 16px;
  --oc-base-dimension-absolute-2: 2px;
  --oc-base-dimension-absolute-20: 20px;
  --oc-base-dimension-absolute-24: 24px;
  --oc-base-dimension-absolute-32: 32px;
  --oc-base-dimension-absolute-4: 4px;
  --oc-base-dimension-absolute-40: 40px;
  --oc-base-dimension-absolute-48: 48px;
  --oc-base-dimension-absolute-56: 56px;
  --oc-base-dimension-absolute-64: 64px;
  --oc-base-dimension-absolute-72: 72px;
  --oc-base-dimension-absolute-8: 8px;
  --oc-base-dimension-absolute-80: 80px;
  --oc-base-dimension-relative-0: 0rem;
  --oc-base-dimension-relative-12: .75rem;
  --oc-base-dimension-relative-16: 1rem;
  --oc-base-dimension-relative-2: .125rem;
  --oc-base-dimension-relative-20: 1.25rem;
  --oc-base-dimension-relative-24: 1.5rem;
  --oc-base-dimension-relative-32: 2rem;
  --oc-base-dimension-relative-4: .25rem;
  --oc-base-dimension-relative-40: 2.5rem;
  --oc-base-dimension-relative-48: 3rem;
  --oc-base-dimension-relative-56: 3.5rem;
  --oc-base-dimension-relative-64: 4rem;
  --oc-base-dimension-relative-72: 4.5rem;
  --oc-base-dimension-relative-8: .5rem;
  --oc-base-dimension-relative-80: 5rem;
  --oc-base-duration-0: 0s;
  --oc-base-duration-1000: 1s;
  --oc-base-duration-125: .125s;
  --oc-base-duration-15: 15ms;
  --oc-base-duration-200: .2s;
  --oc-base-duration-275: .275s;
  --oc-base-duration-350: .35s;
  --oc-base-duration-425: .425s;
  --oc-base-duration-50: 50ms;
  --oc-base-duration-500: .5s;
  --oc-base-duration-750: .75s;
  --oc-base-easing-continuous: cubic-bezier(.8,.35,.6,.85);
  --oc-base-easing-default-in: cubic-bezier(.8,0,1,1);
  --oc-base-easing-default-in-out: cubic-bezier(.8,0,.4,1);
  --oc-base-easing-default-out: cubic-bezier(0,0,.4,1);
  --oc-base-easing-expressive-bounce: cubic-bezier(.6,0,.2,1.3);
  --oc-base-easing-expressive-in: cubic-bezier(.6,0,.8,0);
  --oc-base-easing-expressive-in-out: cubic-bezier(.9,.1,.1,.9);
  --oc-base-easing-expressive-out: cubic-bezier(.2,1,.4,1);
  --oc-base-easing-linear: cubic-bezier(0,0,1,1);
  --oc-base-font-line-height-100: 1rem;
  --oc-base-font-line-height-125: 1.25rem;
  --oc-base-font-line-height-150: 1.5rem;
  --oc-base-font-line-height-175: 1.75rem;
  --oc-base-font-line-height-200: 2rem;
  --oc-base-font-line-height-225: 2.25rem;
  --oc-base-font-line-height-250: 2.5rem;
  --oc-base-font-line-height-300: 3rem;
  --oc-base-font-line-height-350: 3.5rem;
  --oc-base-font-line-height-75: .75rem;
  --oc-base-font-otto-play: "OTTOPlay", serif;
  --oc-base-font-otto-sans: "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-base-font-size-100: 1rem;
  --oc-base-font-size-125: 1.25rem;
  --oc-base-font-size-150: 1.5rem;
  --oc-base-font-size-175: 1.75rem;
  --oc-base-font-size-200: 2rem;
  --oc-base-font-size-250: 2.5rem;
  --oc-base-font-size-300: 3rem;
  --oc-base-font-size-62: .625rem;
  --oc-base-font-size-75: .75rem;
  --oc-base-font-size-87: .875rem;
  --oc-base-font-weight-black: 800;
  --oc-base-font-weight-bold: 700;
  --oc-base-font-weight-regular: 400;
  --oc-base-repetition-1: 1;
  --oc-base-repetition-infinite: infinite;
  --oc-base-shadow-0: unset;
  --oc-base-shadow-100: drop-shadow(0px 1px 1px #00000040) drop-shadow(0px 1px 3px #00000012);
  --oc-base-shadow-200: drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 4px 6px #0000001a);
  --oc-base-shadow-300: drop-shadow(0px 3px 5px #0000004d) drop-shadow(0px 9px 10px #0000001a);
  --oc-semantic-animation-loop-duration: var(--oc-semantic-duration-long-150);
  --oc-semantic-animation-loop-easing: var(--oc-base-easing-continuous);
  --oc-semantic-animation-loop-repetition: var(--oc-base-repetition-infinite);
  --oc-semantic-border-radius-0: var(--oc-base-dimension-relative-0);
  --oc-semantic-border-radius-100: var(--oc-base-dimension-relative-8);
  --oc-semantic-border-radius-150: var(--oc-base-dimension-relative-12);
  --oc-semantic-border-radius-200: var(--oc-base-dimension-relative-16);
  --oc-semantic-border-radius-25: var(--oc-base-dimension-relative-2);
  --oc-semantic-border-radius-250: var(--oc-base-dimension-relative-20);
  --oc-semantic-border-radius-300: var(--oc-base-dimension-relative-24);
  --oc-semantic-border-radius-50: var(--oc-base-dimension-relative-4);
  --oc-semantic-border-width-0: 0px;
  --oc-semantic-border-width-100: 1px;
  --oc-semantic-border-width-150: 1.5px;
  --oc-semantic-border-width-200: 2px;
  --oc-semantic-border-width-400: 4px;
  --oc-semantic-checked-outline-inline-color: var(--oc-semantic-color-background-canvas);
  --oc-semantic-checked-outline-outline-color: var(--oc-semantic-color-background-inverted);
  --oc-semantic-checked-outline-width-inline-100: var(--oc-semantic-border-width-100);
  --oc-semantic-checked-outline-width-outline-100: var(--oc-semantic-border-width-150);
  --oc-semantic-checked-outline-width-outline-200: var(--oc-semantic-border-width-200);
  --oc-semantic-color-above-background: var(--oc-base-color-white-100);
  --oc-semantic-color-background-above: var(--oc-base-color-white-100);
  --oc-semantic-color-background-block-beige: var(--oc-base-color-beige-90);
  --oc-semantic-color-background-block-blue: var(--oc-base-color-blue-90);
  --oc-semantic-color-background-block-green: var(--oc-base-color-green-80);
  --oc-semantic-color-background-block-mint: var(--oc-base-color-mint-80);
  --oc-semantic-color-background-block-orange: var(--oc-base-color-orange-80);
  --oc-semantic-color-background-block-pink: var(--oc-base-color-pink-80);
  --oc-semantic-color-background-block-purple: var(--oc-base-color-purple-80);
  --oc-semantic-color-background-block-warm-red: var(--oc-base-color-warm-red-80);
  --oc-semantic-color-background-block-yellow: var(--oc-base-color-yellow-80);
  --oc-semantic-color-background-brand: var(--oc-base-color-otto-red-100);
  --oc-semantic-color-background-canvas: var(--oc-base-color-white-100);
  --oc-semantic-color-background-card-blue: var(--oc-base-color-blue-130);
  --oc-semantic-color-background-card-green: var(--oc-base-color-green-130);
  --oc-semantic-color-background-card-mint: var(--oc-base-color-mint-130);
  --oc-semantic-color-background-card-orange: var(--oc-base-color-orange-140);
  --oc-semantic-color-background-card-pink: var(--oc-base-color-pink-130);
  --oc-semantic-color-background-card-purple: var(--oc-base-color-purple-130);
  --oc-semantic-color-background-card-warm-red: var(--oc-base-color-warm-red-130);
  --oc-semantic-color-background-card-yellow: var(--oc-base-color-yellow-140);
  --oc-semantic-color-background-disabled: var(--oc-base-color-gray-100);
  --oc-semantic-color-background-emphasized-error: var(--oc-base-color-error-red-50);
  --oc-semantic-color-background-emphasized-hint: var(--oc-base-color-interactive-blue-50);
  --oc-semantic-color-background-emphasized-info: var(--oc-base-color-gray-150);
  --oc-semantic-color-background-emphasized-success: var(--oc-base-color-success-green-50);
  --oc-semantic-color-background-emphasized-sustainable: var(--oc-base-color-sustainable-green-110);
  --oc-semantic-color-background-emphasized-warning: var(--oc-base-color-warning-orange-50);
  --oc-semantic-color-background-error: var(--oc-base-color-error-red-25);
  --oc-semantic-color-background-frame: var(--oc-base-color-gray-25);
  --oc-semantic-color-background-hint: var(--oc-base-color-interactive-blue-25);
  --oc-semantic-color-background-info: var(--oc-base-color-gray-100);
  --oc-semantic-color-background-inverted: var(--oc-base-color-black-100);
  --oc-semantic-color-background-primary: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-background-sale: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-background-soft-beige: var(--oc-base-color-beige-90);
  --oc-semantic-color-background-soft-blue: var(--oc-base-color-blue-90);
  --oc-semantic-color-background-soft-error: var(--oc-base-color-error-red-25);
  --oc-semantic-color-background-soft-green: var(--oc-base-color-green-80);
  --oc-semantic-color-background-soft-hint: var(--oc-base-color-interactive-blue-25);
  --oc-semantic-color-background-soft-info: var(--oc-base-color-gray-100);
  --oc-semantic-color-background-soft-mint: var(--oc-base-color-mint-80);
  --oc-semantic-color-background-soft-orange: var(--oc-base-color-orange-80);
  --oc-semantic-color-background-soft-pink: var(--oc-base-color-pink-80);
  --oc-semantic-color-background-soft-purple: var(--oc-base-color-purple-80);
  --oc-semantic-color-background-soft-success: var(--oc-base-color-success-green-25);
  --oc-semantic-color-background-soft-sustainable: var(--oc-base-color-sustainable-green-70);
  --oc-semantic-color-background-soft-warm-red: var(--oc-base-color-warm-red-80);
  --oc-semantic-color-background-soft-warning: var(--oc-base-color-warning-orange-25);
  --oc-semantic-color-background-soft-yellow: var(--oc-base-color-yellow-80);
  --oc-semantic-color-background-stacked: var(--oc-base-color-gray-25);
  --oc-semantic-color-background-sticky: var(--oc-base-color-white-100);
  --oc-semantic-color-background-strong-blue: var(--oc-base-color-blue-130);
  --oc-semantic-color-background-strong-error: var(--oc-base-color-error-red-100);
  --oc-semantic-color-background-strong-green: var(--oc-base-color-green-130);
  --oc-semantic-color-background-strong-hint: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-background-strong-info: var(--oc-semantic-color-text-default);
  --oc-semantic-color-background-strong-mint: var(--oc-base-color-mint-130);
  --oc-semantic-color-background-strong-orange: var(--oc-base-color-orange-140);
  --oc-semantic-color-background-strong-pink: var(--oc-base-color-pink-130);
  --oc-semantic-color-background-strong-purple: var(--oc-base-color-purple-130);
  --oc-semantic-color-background-strong-success: var(--oc-base-color-success-green-100);
  --oc-semantic-color-background-strong-sustainable: var(--oc-base-color-sustainable-green-130);
  --oc-semantic-color-background-strong-warm-red: var(--oc-base-color-warm-red-130);
  --oc-semantic-color-background-strong-warning: var(--oc-base-color-warning-orange-100);
  --oc-semantic-color-background-strong-yellow: var(--oc-base-color-yellow-140);
  --oc-semantic-color-background-success: var(--oc-base-color-success-green-25);
  --oc-semantic-color-background-sustainable: var(--oc-base-color-sustainable-green-70);
  --oc-semantic-color-background-warning: var(--oc-base-color-warning-orange-25);
  --oc-semantic-color-brand: var(--oc-base-color-otto-red-100);
  --oc-semantic-color-canvas-background: var(--oc-base-color-white-100);
  --oc-semantic-color-disabled-background: var(--oc-base-color-gray-100);
  --oc-semantic-color-disabled-border: var(--oc-base-color-gray-150);
  --oc-semantic-color-disabled-overlay: #d6d6d6a3;
  --oc-semantic-color-disabled-text: var(--oc-base-color-gray-200);
  --oc-semantic-color-divider: var(--oc-base-color-black-opacity-10);
  --oc-semantic-color-error-100: var(--oc-base-color-error-red-100);
  --oc-semantic-color-error-25: var(--oc-base-color-error-red-25);
  --oc-semantic-color-error-50: var(--oc-base-color-error-red-50);
  --oc-semantic-color-error-75: var(--oc-base-color-error-red-75);
  --oc-semantic-color-frame-background: var(--oc-base-color-gray-25);
  --oc-semantic-color-hint-100: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-hint-25: var(--oc-base-color-interactive-blue-25);
  --oc-semantic-color-hint-50: var(--oc-base-color-interactive-blue-50);
  --oc-semantic-color-hint-75: var(--oc-base-color-interactive-blue-75);
  --oc-semantic-color-inverted-background: var(--oc-base-color-black-100);
  --oc-semantic-color-overlay-active: #00000017;
  --oc-semantic-color-overlay-active-inverted: #ffffff1f;
  --oc-semantic-color-overlay-default: #0000;
  --oc-semantic-color-overlay-disabled: #d6d6d6a3;
  --oc-semantic-color-overlay-hover: #00000008;
  --oc-semantic-color-overlay-hover-inverted: #ffffff14;
  --oc-semantic-color-overlay-scrim: #212121a6;
  --oc-semantic-color-overlay-stacked: var(--oc-base-color-black-opacity-6);
  --oc-semantic-color-primary-background: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-sale-background: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-scrim: #212121a6;
  --oc-semantic-color-stacked-background: var(--oc-base-color-gray-25);
  --oc-semantic-color-sticky-background: var(--oc-base-color-white-100);
  --oc-semantic-color-stroke-disabled: var(--oc-base-color-gray-150);
  --oc-semantic-color-stroke-divider: var(--oc-base-color-black-opacity-10);
  --oc-semantic-color-stroke-error: var(--oc-base-color-error-red-75);
  --oc-semantic-color-stroke-hint: var(--oc-base-color-interactive-blue-75);
  --oc-semantic-color-stroke-info: var(--oc-base-color-gray-400);
  --oc-semantic-color-stroke-success: var(--oc-base-color-success-green-75);
  --oc-semantic-color-stroke-sustainable: var(--oc-base-color-sustainable-green-120);
  --oc-semantic-color-stroke-warning: var(--oc-base-color-warning-orange-75);
  --oc-semantic-color-success-100: var(--oc-base-color-success-green-100);
  --oc-semantic-color-success-25: var(--oc-base-color-success-green-25);
  --oc-semantic-color-success-50: var(--oc-base-color-success-green-50);
  --oc-semantic-color-success-75: var(--oc-base-color-success-green-75);
  --oc-semantic-color-sustainable-100: var(--oc-base-color-sustainable-green-130);
  --oc-semantic-color-sustainable-25: var(--oc-base-color-sustainable-green-70);
  --oc-semantic-color-sustainable-50: var(--oc-base-color-sustainable-green-110);
  --oc-semantic-color-sustainable-75: var(--oc-base-color-sustainable-green-120);
  --oc-semantic-color-text-brand: var(--oc-base-color-otto-red-100);
  --oc-semantic-color-text-default: var(--oc-base-color-black-100);
  --oc-semantic-color-text-disabled: var(--oc-base-color-gray-200);
  --oc-semantic-color-text-error: var(--oc-base-color-error-red-100);
  --oc-semantic-color-text-hint: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-text-info: var(--oc-semantic-color-text-default);
  --oc-semantic-color-text-interactive: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-text-inverted: var(--oc-base-color-white-100);
  --oc-semantic-color-text-sale: var(--oc-base-color-otto-red-125);
  --oc-semantic-color-text-secondary: var(--oc-base-color-gray-400);
  --oc-semantic-color-text-success: var(--oc-base-color-success-green-100);
  --oc-semantic-color-text-sustainable: var(--oc-base-color-sustainable-green-130);
  --oc-semantic-color-text-warning: var(--oc-base-color-warning-orange-100);
  --oc-semantic-color-warning-100: var(--oc-base-color-warning-orange-100);
  --oc-semantic-color-warning-25: var(--oc-base-color-warning-orange-25);
  --oc-semantic-color-warning-50: var(--oc-base-color-warning-orange-50);
  --oc-semantic-color-warning-75: var(--oc-base-color-warning-orange-75);
  --oc-semantic-duration-instant: var(--oc-base-duration-15);
  --oc-semantic-duration-long-100: var(--oc-base-duration-750);
  --oc-semantic-duration-long-150: var(--oc-base-duration-1000);
  --oc-semantic-duration-long-50: var(--oc-base-duration-500);
  --oc-semantic-duration-medium-100: var(--oc-base-duration-350);
  --oc-semantic-duration-medium-150: var(--oc-base-duration-425);
  --oc-semantic-duration-medium-50: var(--oc-base-duration-275);
  --oc-semantic-duration-reduced-motion: var(--oc-base-duration-0);
  --oc-semantic-duration-short-100: var(--oc-base-duration-125);
  --oc-semantic-duration-short-150: var(--oc-base-duration-200);
  --oc-semantic-duration-short-50: var(--oc-base-duration-50);
  --oc-semantic-focus-outline-color: var(--oc-base-color-interactive-blue-75);
  --oc-semantic-focus-outline-offset: var(--oc-semantic-spacing-absolute-12);
  --oc-semantic-focus-outline-radius-100: calc(.5rem + 2px);
  --oc-semantic-focus-outline-radius-12: calc(0rem + 2px);
  --oc-semantic-focus-outline-radius-150: calc(.75rem + 2px);
  --oc-semantic-focus-outline-radius-200: calc(1rem + 2px);
  --oc-semantic-focus-outline-radius-25: calc(.125rem + 2px);
  --oc-semantic-focus-outline-radius-250: calc(1rem + 2px);
  --oc-semantic-focus-outline-radius-300: calc(1rem + 2px);
  --oc-semantic-focus-outline-radius-50: calc(.25rem + 2px);
  --oc-semantic-focus-outline-style: solid;
  --oc-semantic-focus-outline-width: var(--oc-semantic-border-width-200);
  --oc-semantic-font-copy-100: 400 .875rem/1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-125: 400 1rem/1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-50: 400 .625rem/1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-75: 400 .75rem/1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-copy-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-copy-font-weight: var(--oc-base-font-weight-regular);
  --oc-semantic-font-display-100: 800 2rem/2.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-display-200: 800 2.5rem/3rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-display-300: 800 3rem/3.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-display-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-display-font-weight: var(--oc-base-font-weight-black);
  --oc-semantic-font-headline-10: 700 .625rem/.75rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-100: 700 1rem/1.5rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-200: 700 1.25rem/1.75rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-25: 700 .75rem/1rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-300: 700 1.5rem/2rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-400: 700 1.75rem/2.25rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-50: 700 .875rem/1.25rem "OTTOSans", Arial, Helvetica, sans-serif;
  --oc-semantic-font-headline-font-family: var(--oc-base-font-otto-sans);
  --oc-semantic-font-headline-font-weight: var(--oc-base-font-weight-bold);
  --oc-semantic-gestures-long-press-delay: var(--oc-semantic-duration-long-50);
  --oc-semantic-shadow-above: var(--oc-base-shadow-200);
  --oc-semantic-shadow-canvas: var(--oc-base-shadow-0);
  --oc-semantic-shadow-stacked: var(--oc-base-shadow-0);
  --oc-semantic-shadow-sticky: var(--oc-base-shadow-300);
  --oc-semantic-spacing-0: var(--oc-base-dimension-absolute-0);
  --oc-semantic-spacing-100: var(--oc-base-dimension-absolute-16);
  --oc-semantic-spacing-12: var(--oc-base-dimension-absolute-2);
  --oc-semantic-spacing-150: var(--oc-base-dimension-absolute-24);
  --oc-semantic-spacing-200: var(--oc-base-dimension-absolute-32);
  --oc-semantic-spacing-25: var(--oc-base-dimension-absolute-4);
  --oc-semantic-spacing-250: var(--oc-base-dimension-absolute-40);
  --oc-semantic-spacing-50: var(--oc-base-dimension-absolute-8);
  --oc-semantic-spacing-75: var(--oc-base-dimension-absolute-12);
  --oc-semantic-spacing-absolute-0: var(--oc-base-dimension-absolute-0);
  --oc-semantic-spacing-absolute-100: var(--oc-base-dimension-absolute-16);
  --oc-semantic-spacing-absolute-12: var(--oc-base-dimension-absolute-2);
  --oc-semantic-spacing-absolute-150: var(--oc-base-dimension-absolute-24);
  --oc-semantic-spacing-absolute-200: var(--oc-base-dimension-absolute-32);
  --oc-semantic-spacing-absolute-25: var(--oc-base-dimension-absolute-4);
  --oc-semantic-spacing-absolute-250: var(--oc-base-dimension-absolute-40);
  --oc-semantic-spacing-absolute-50: var(--oc-base-dimension-absolute-8);
  --oc-semantic-spacing-absolute-75: var(--oc-base-dimension-absolute-12);
  --oc-semantic-spacing-cinema-gap: var(--oc-semantic-spacing-absolute-100);
  --oc-semantic-spacing-content-layout-gap: var(--oc-semantic-spacing-absolute-100);
  --oc-semantic-spacing-content-layout-outer: var(--oc-semantic-spacing-absolute-100);
  --oc-semantic-spacing-default-between-blocks: var(--oc-semantic-spacing-absolute-25);
  --oc-semantic-spacing-form-checkbox-radio-button-horizontal: var(--oc-base-dimension-absolute-24);
  --oc-semantic-spacing-form-checkbox-radio-button-vertical: var(--oc-base-dimension-absolute-24);
  --oc-semantic-spacing-form-hint-vertical: var(--oc-base-dimension-absolute-4);
  --oc-semantic-spacing-form-horizontal: var(--oc-base-dimension-absolute-8);
  --oc-semantic-spacing-form-vertical: var(--oc-base-dimension-absolute-24);
  --oc-semantic-spacing-page-layout-gap: var(--oc-semantic-spacing-absolute-25);
  --oc-semantic-spacing-page-layout-outer: var(--oc-semantic-spacing-absolute-0);
  --oc-semantic-spacing-relative-0: var(--oc-base-dimension-relative-0);
  --oc-semantic-spacing-relative-100: var(--oc-base-dimension-relative-16);
  --oc-semantic-spacing-relative-12: var(--oc-base-dimension-relative-2);
  --oc-semantic-spacing-relative-150: var(--oc-base-dimension-relative-24);
  --oc-semantic-spacing-relative-200: var(--oc-base-dimension-relative-32);
  --oc-semantic-spacing-relative-25: var(--oc-base-dimension-relative-4);
  --oc-semantic-spacing-relative-250: var(--oc-base-dimension-relative-40);
  --oc-semantic-spacing-relative-50: var(--oc-base-dimension-relative-8);
  --oc-semantic-spacing-relative-75: var(--oc-base-dimension-relative-12);
  --oc-semantic-transition-appear-duration: var(--oc-semantic-duration-short-100);
  --oc-semantic-transition-appear-easing: var(--oc-base-easing-default-out);
  --oc-semantic-transition-collapse-duration: var(--oc-semantic-duration-short-100);
  --oc-semantic-transition-collapse-easing: var(--oc-base-easing-default-in-out);
  --oc-semantic-transition-disappear-duration: var(--oc-semantic-duration-short-50);
  --oc-semantic-transition-disappear-easing: var(--oc-base-easing-default-in);
  --oc-semantic-transition-enter-duration: var(--oc-semantic-duration-medium-150);
  --oc-semantic-transition-enter-easing: var(--oc-base-easing-expressive-out);
  --oc-semantic-transition-exit-duration: var(--oc-semantic-duration-short-150);
  --oc-semantic-transition-exit-easing: var(--oc-base-easing-expressive-in);
  --oc-semantic-transition-expand-duration: var(--oc-semantic-duration-short-150);
  --oc-semantic-transition-expand-easing: var(--oc-base-easing-default-in-out);
  --oc-semantic-transition-navigate-duration: var(--oc-semantic-duration-short-150);
  --oc-semantic-transition-navigate-easing: var(--oc-base-easing-default-out);
  --oc-component-button-100-border-radius: var(--oc-semantic-border-radius-100);
  --oc-component-button-50-border-radius: var(--oc-semantic-border-radius-100);
  --oc-component-button-secondary-background-color: var(--oc-base-color-gray-100);
  --oc-component-button-secondary-background-color-active: var(--oc-base-color-black-lighten-67);
  --oc-component-button-secondary-background-color-hover: var(--oc-base-color-black-lighten-71);
  --oc-component-button-secondary-over-color-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-button-secondary-over-color-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-button-success-background-color-active: #89d2a4;
  --oc-component-button-success-background-color-hover: #aee0c1;
  --oc-component-button-tertiary-background-color: var(--oc-base-color-black-opacity-0);
  --oc-component-button-tertiary-background-color-active: var(--oc-base-color-black-opacity-10);
  --oc-component-button-tertiary-background-color-hover: var(--oc-base-color-black-opacity-5);
  --oc-component-chip-200-text-spacing-x: var(--oc-semantic-spacing-absolute-25);
  --oc-component-chip-checked-background-color: var(--oc-base-color-interactive-blue-lighten-45);
  --oc-component-chip-checked-background-color-active: var(--oc-base-color-interactive-blue-lighten-25);
  --oc-component-chip-checked-background-color-hover: var(--oc-base-color-interactive-blue-lighten-35);
  --oc-component-chip-checked-border-color: var(--oc-base-color-black-100);
  --oc-component-chip-default-background-color-active: var(--oc-base-color-black-lighten-61);
  --oc-component-chip-default-background-color-hover: var(--oc-base-color-black-lighten-71);
  --oc-component-chip-over-color-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-chip-over-color-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-expander-fade-color: linear-gradient(180deg, #fff0 0%, #ffffffbf 50%, #fff 100%);
  --oc-component-expander-fade-stop-0: #fff0;
  --oc-component-expander-fade-stop-100: #fff;
  --oc-component-expander-fade-stop-50: #ffffffbf;
  --oc-component-form-checkbox-100-icon-size: var(--oc-base-dimension-relative-16);
  --oc-component-form-default-border-color: var(--oc-base-color-gray-200);
  --oc-component-form-default-border-color-focus: var(--oc-base-color-black-100);
  --oc-component-icon-button-100-border-radius: var(--oc-semantic-border-radius-300);
  --oc-component-icon-button-50-border-radius: var(--oc-semantic-border-radius-200);
  --oc-component-icon-button-elevation-level-100-background-color: var(--oc-semantic-color-background-canvas);
  --oc-component-icon-button-elevation-level-100-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-100-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-elevation-level-200-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-200-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-elevation-level-300-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-300-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-icon-button-inverted-background-color: #fff0;
  --oc-component-icon-button-inverted-background-color-active: #ffffff1a;
  --oc-component-icon-button-inverted-background-color-hover: #ffffff08;
  --oc-component-icon-button-secondary-over-color-background-color-active: var(--oc-base-color-gray-150);
  --oc-component-icon-button-secondary-over-color-background-color-hover: var(--oc-base-color-gray-100);
  --oc-component-link-primary-text-color-active: #143b75;
  --oc-component-link-primary-text-color-hover: #1c50a0;
  --oc-component-link-sale-text-color-active: #75000f;
  --oc-component-link-sale-text-color-hover: #a80016;
  --oc-component-link-secondary-text-color-active: #3a3a3a;
  --oc-component-link-secondary-text-color-hover: #545454;
  --oc-component-logo-paypal-color: #000;
  --oc-component-pagination-dot-active: var(--oc-base-color-black-lighten-30);
  --oc-component-pagination-dot-default: var(--oc-base-color-gray-150);
  --oc-component-pagination-dot-selected: var(--oc-base-color-black-100);
  --oc-component-progress-bar-50-height: var(--oc-base-dimension-absolute-4);
  --oc-component-progress-bar-primary-active-indicator-color: var(--oc-base-color-black-100);
  --oc-component-row-background-color: var(--oc-base-color-white-opacity-0);
  --oc-component-row-background-color-selected: var(--oc-base-color-interactive-blue-lighten-55);
  --oc-component-row-background-color-selected-active: var(--oc-base-color-interactive-blue-lighten-35);
  --oc-component-row-background-color-selected-hover: var(--oc-base-color-interactive-blue-lighten-45);
  --oc-component-search-field-background-color: var(--oc-semantic-color-background-stacked);
  --oc-component-search-field-border-color-focused: var(--oc-base-color-black-100);
  --oc-component-search-field-border-color-hover: var(--oc-base-color-gray-200);
  --oc-component-search-field-border-radius: var(--oc-semantic-border-radius-300);
  --oc-component-selection-tile-border-color-selected: var(--oc-base-color-black-100);
  --oc-component-selection-tile-inner-border-color-selected: var(--oc-base-color-white-100);
  --oc-component-sheet-action-bar-background-color: var(--oc-semantic-color-background-canvas);
  --oc-component-sheet-action-bar-conditional-border-top-color: var(--oc-semantic-color-background-frame);
  --oc-component-sheet-drag-indicator-color: var(--oc-base-color-black-opacity-40);
  --oc-component-sheet-header-background-color: var(--oc-semantic-color-background-canvas);
  --oc-component-sheet-header-conditional-border-bottom-color: var(--oc-semantic-color-background-frame);
  --oc-component-skeleton-background-color: var(--oc-base-color-gray-100);
  --oc-component-skeleton-wave-color: linear-gradient(90deg, #fff0 0%, #ffffff80 50%, #fff0 100%);
  --oc-component-skeleton-wave-stop-0: #fff0;
  --oc-component-skeleton-wave-stop-100: #fff0;
  --oc-component-skeleton-wave-stop-50: #fefefe80;
  --oc-component-skip-link-appear-duration: var(--oc-semantic-transition-disappear-duration);
  --oc-component-skip-link-border-radius: var(--oc-semantic-border-radius-200);
  --oc-component-spinner-default-fill-color: var(--oc-base-color-gray-400);
  --oc-component-spinner-inverted-fill-color: var(--oc-base-color-white-100);
  --oc-component-switch-checked-background-color-active: #235235;
  --oc-component-switch-checked-background-color-hover: #32764c;
  --oc-component-switch-checked-icon-color: var(--oc-semantic-color-text-success);
  --oc-component-switch-default-background-color: var(--oc-base-color-gray-200);
  --oc-component-switch-default-background-color-active: var(--oc-base-color-black-lighten-20);
  --oc-component-tab-bar-fade-stop-1: #fff;
  --oc-component-tab-bar-fade-stop-2: #fffc;
  --oc-component-tag-service-background-color: var(--oc-base-color-service-blue-100);}
.stage[data-scheme=dark] {
  --oc-base-color-white: var(--oc-base-color-white-100,#fff);
  --oc-semantic-color-above-background: var(--oc-base-color-black-lighten-15);
  --oc-semantic-color-background-above: var(--oc-base-color-black-lighten-15);
  --oc-semantic-color-background-block-beige: var(--oc-base-color-beige-140);
  --oc-semantic-color-background-block-blue: var(--oc-base-color-blue-140);
  --oc-semantic-color-background-block-green: var(--oc-base-color-green-140);
  --oc-semantic-color-background-block-mint: var(--oc-base-color-mint-140);
  --oc-semantic-color-background-block-orange: var(--oc-base-color-orange-140);
  --oc-semantic-color-background-block-pink: var(--oc-base-color-pink-140);
  --oc-semantic-color-background-block-purple: var(--oc-base-color-purple-140);
  --oc-semantic-color-background-block-warm-red: var(--oc-base-color-warm-red-140);
  --oc-semantic-color-background-block-yellow: var(--oc-base-color-yellow-140);
  --oc-semantic-color-background-canvas: var(--oc-base-color-black-lighten-5);
  --oc-semantic-color-background-card-blue: var(--oc-base-color-blue-100);
  --oc-semantic-color-background-card-green: var(--oc-base-color-green-100);
  --oc-semantic-color-background-card-mint: var(--oc-base-color-mint-100);
  --oc-semantic-color-background-card-orange: var(--oc-base-color-orange-100);
  --oc-semantic-color-background-card-pink: var(--oc-base-color-pink-100);
  --oc-semantic-color-background-card-purple: var(--oc-base-color-purple-100);
  --oc-semantic-color-background-card-warm-red: var(--oc-base-color-warm-red-100);
  --oc-semantic-color-background-card-yellow: var(--oc-base-color-yellow-100);
  --oc-semantic-color-background-disabled: var(--oc-base-color-black-lighten-15);
  --oc-semantic-color-background-emphasized-error: var(--oc-base-color-error-red-100);
  --oc-semantic-color-background-emphasized-hint: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-background-emphasized-info: var(--oc-base-color-black-lighten-20);
  --oc-semantic-color-background-emphasized-success: var(--oc-base-color-success-green-100);
  --oc-semantic-color-background-emphasized-sustainable: var(--oc-base-color-sustainable-green-130);
  --oc-semantic-color-background-emphasized-warning: var(--oc-base-color-warning-orange-100);
  --oc-semantic-color-background-error: #570011;
  --oc-semantic-color-background-frame: var(--oc-base-color-black-100);
  --oc-semantic-color-background-hint: #0e2850;
  --oc-semantic-color-background-info: var(--oc-base-color-black-lighten-10);
  --oc-semantic-color-background-inverted: var(--oc-base-color-white-100);
  --oc-semantic-color-background-soft-beige: var(--oc-base-color-beige-140);
  --oc-semantic-color-background-soft-blue: var(--oc-base-color-blue-140);
  --oc-semantic-color-background-soft-error: #570011;
  --oc-semantic-color-background-soft-green: var(--oc-base-color-green-140);
  --oc-semantic-color-background-soft-hint: #0e2850;
  --oc-semantic-color-background-soft-info: var(--oc-base-color-black-lighten-10);
  --oc-semantic-color-background-soft-mint: var(--oc-base-color-mint-140);
  --oc-semantic-color-background-soft-orange: var(--oc-base-color-orange-140);
  --oc-semantic-color-background-soft-pink: var(--oc-base-color-pink-140);
  --oc-semantic-color-background-soft-purple: var(--oc-base-color-purple-140);
  --oc-semantic-color-background-soft-success: #0f331c;
  --oc-semantic-color-background-soft-sustainable: #1f2f1e;
  --oc-semantic-color-background-soft-warm-red: var(--oc-base-color-warm-red-140);
  --oc-semantic-color-background-soft-warning: #4a1d0a;
  --oc-semantic-color-background-soft-yellow: var(--oc-base-color-yellow-140);
  --oc-semantic-color-background-stacked: var(--oc-base-color-black-lighten-10);
  --oc-semantic-color-background-sticky: var(--oc-base-color-black-lighten-20);
  --oc-semantic-color-background-strong-blue: var(--oc-base-color-blue-100);
  --oc-semantic-color-background-strong-error: var(--oc-base-color-error-red-50);
  --oc-semantic-color-background-strong-green: var(--oc-base-color-green-100);
  --oc-semantic-color-background-strong-hint: var(--oc-base-color-interactive-blue-50);
  --oc-semantic-color-background-strong-mint: var(--oc-base-color-mint-100);
  --oc-semantic-color-background-strong-orange: var(--oc-base-color-orange-100);
  --oc-semantic-color-background-strong-pink: var(--oc-base-color-pink-100);
  --oc-semantic-color-background-strong-purple: var(--oc-base-color-purple-100);
  --oc-semantic-color-background-strong-success: var(--oc-base-color-success-green-50);
  --oc-semantic-color-background-strong-sustainable: var(--oc-base-color-sustainable-green-110);
  --oc-semantic-color-background-strong-warm-red: var(--oc-base-color-warm-red-100);
  --oc-semantic-color-background-strong-warning: var(--oc-base-color-warning-orange-50);
  --oc-semantic-color-background-strong-yellow: var(--oc-base-color-yellow-100);
  --oc-semantic-color-background-success: #0f331c;
  --oc-semantic-color-background-sustainable: #1f2f1e;
  --oc-semantic-color-background-warning: #4a1d0a;
  --oc-semantic-color-canvas-background: var(--oc-base-color-black-lighten-5);
  --oc-semantic-color-disabled-background: var(--oc-base-color-black-lighten-15);
  --oc-semantic-color-disabled-border: var(--oc-base-color-black-lighten-30);
  --oc-semantic-color-disabled-overlay: #5c5c5ca3;
  --oc-semantic-color-divider: var(--oc-base-color-white-opacity-20);
  --oc-semantic-color-error-100: var(--oc-base-color-error-red-50);
  --oc-semantic-color-error-25: #570011;
  --oc-semantic-color-error-50: var(--oc-base-color-error-red-100);
  --oc-semantic-color-frame-background: var(--oc-base-color-black-100);
  --oc-semantic-color-hint-100: var(--oc-base-color-interactive-blue-50);
  --oc-semantic-color-hint-25: #0e2850;
  --oc-semantic-color-hint-50: var(--oc-base-color-interactive-blue-100);
  --oc-semantic-color-inverted-background: var(--oc-base-color-white-100);
  --oc-semantic-color-overlay-active: #ffffff1f;
  --oc-semantic-color-overlay-active-inverted: #00000017;
  --oc-semantic-color-overlay-default: #fff0;
  --oc-semantic-color-overlay-disabled: #5c5c5ca3;
  --oc-semantic-color-overlay-hover: #ffffff14;
  --oc-semantic-color-overlay-hover-inverted: #00000008;
  --oc-semantic-color-overlay-stacked: var(--oc-base-color-white-opacity-10);
  --oc-semantic-color-stacked-background: var(--oc-base-color-black-lighten-10);
  --oc-semantic-color-sticky-background: var(--oc-base-color-black-lighten-20);
  --oc-semantic-color-stroke-disabled: var(--oc-base-color-black-lighten-30);
  --oc-semantic-color-stroke-divider: var(--oc-base-color-white-opacity-20);
  --oc-semantic-color-stroke-info: var(--oc-base-color-gray-200);
  --oc-semantic-color-success-100: var(--oc-base-color-success-green-50);
  --oc-semantic-color-success-25: #0f331c;
  --oc-semantic-color-success-50: var(--oc-base-color-success-green-100);
  --oc-semantic-color-sustainable-100: var(--oc-base-color-sustainable-green-110);
  --oc-semantic-color-sustainable-25: #1f2f1e;
  --oc-semantic-color-sustainable-50: var(--oc-base-color-sustainable-green-130);
  --oc-semantic-color-text-brand: #fff;
  --oc-semantic-color-text-default: var(--oc-base-color-white-100);
  --oc-semantic-color-text-error: var(--oc-base-color-error-red-50);
  --oc-semantic-color-text-hint: var(--oc-base-color-interactive-blue-50);
  --oc-semantic-color-text-interactive: #53bfff;
  --oc-semantic-color-text-inverted: var(--oc-base-color-black-100);
  --oc-semantic-color-text-sale: #ff435c;
  --oc-semantic-color-text-secondary: var(--oc-base-color-gray-150);
  --oc-semantic-color-text-success: var(--oc-base-color-success-green-50);
  --oc-semantic-color-text-sustainable: var(--oc-base-color-sustainable-green-110);
  --oc-semantic-color-text-warning: var(--oc-base-color-warning-orange-50);
  --oc-semantic-color-warning-100: var(--oc-base-color-warning-orange-50);
  --oc-semantic-color-warning-25: #4a1d0a;
  --oc-semantic-color-warning-50: var(--oc-base-color-warning-orange-100);
  --oc-semantic-focus-outline-color: #53bfff;
  --oc-component-button-secondary-background-color: var(--oc-base-color-black-lighten-20);
  --oc-component-button-secondary-background-color-active: var(--oc-base-color-black-lighten-30);
  --oc-component-button-secondary-background-color-hover: var(--oc-base-color-black-lighten-25);
  --oc-component-button-secondary-over-color-background-color-active: var(--oc-base-color-black-lighten-15);
  --oc-component-button-secondary-over-color-background-color-hover: var(--oc-base-color-black-lighten-10);
  --oc-component-button-success-background-color-active: #268247;
  --oc-component-button-success-background-color-hover: #1b5a32;
  --oc-component-button-tertiary-background-color: var(--oc-base-color-white-opacity-0);
  --oc-component-button-tertiary-background-color-active: var(--oc-base-color-white-opacity-10);
  --oc-component-button-tertiary-background-color-hover: var(--oc-base-color-white-opacity-5);
  --oc-component-chip-200-text-spacing-x: var(--oc-semantic-spacing-25);
  --oc-component-chip-checked-background-color: var(--oc-base-color-interactive-blue-darken-15);
  --oc-component-chip-checked-background-color-active: var(--oc-base-color-interactive-blue-darken-5);
  --oc-component-chip-checked-background-color-hover: var(--oc-base-color-interactive-blue-darken-10);
  --oc-component-chip-checked-border-color: var(--oc-base-color-white-100);
  --oc-component-chip-default-background-color-active: var(--oc-base-color-black-lighten-20);
  --oc-component-chip-default-background-color-hover: var(--oc-base-color-black-lighten-15);
  --oc-component-chip-over-color-background-color-active: var(--oc-base-color-black-lighten-15);
  --oc-component-chip-over-color-background-color-hover: var(--oc-base-color-black-lighten-10);
  --oc-component-expander-fade-color: linear-gradient(180deg, #2e2e2e00 0%, #2e2e2ebf 50%, #2e2e2e 100%);
  --oc-component-expander-fade-stop-0: #2e2e2e00;
  --oc-component-expander-fade-stop-100: #2e2e2e;
  --oc-component-expander-fade-stop-50: #2e2e2ebf;
  --oc-component-form-checkbox-100-icon-size: var(--oc-base-dimension-absolute-16);
  --oc-component-form-default-border-color: var(--oc-base-color-gray-400);
  --oc-component-form-default-border-color-focus: var(--oc-base-color-gray-150);
  --oc-component-icon-button-elevation-level-100-background-color: var(--oc-semantic-color-background-stacked);
  --oc-component-icon-button-elevation-level-100-background-color-active: var(--oc-base-color-black-lighten-20);
  --oc-component-icon-button-elevation-level-100-background-color-hover: var(--oc-base-color-black-lighten-15);
  --oc-component-icon-button-elevation-level-200-background-color-active: var(--oc-base-color-black-lighten-25);
  --oc-component-icon-button-elevation-level-200-background-color-hover: var(--oc-base-color-black-lighten-20);
  --oc-component-icon-button-elevation-level-300-background-color-active: var(--oc-base-color-black-lighten-30);
  --oc-component-icon-button-elevation-level-300-background-color-hover: var(--oc-base-color-black-lighten-25);
  --oc-component-icon-button-inverted-background-color: #0000;
  --oc-component-icon-button-inverted-background-color-active: #0000001a;
  --oc-component-icon-button-inverted-background-color-hover: #00000008;
  --oc-component-icon-button-secondary-over-color-background-color-active: var(--oc-base-color-black-lighten-15);
  --oc-component-icon-button-secondary-over-color-background-color-hover: var(--oc-base-color-black-lighten-10);
  --oc-component-link-primary-text-color-active: #b7e4ff;
  --oc-component-link-primary-text-color-hover: #84d1ff;
  --oc-component-link-sale-text-color-active: #ff425b;
  --oc-component-link-sale-text-color-hover: #ff0f2e;
  --oc-component-link-secondary-text-color-active: #fff;
  --oc-component-link-secondary-text-color-hover: #e5e5e5;
  --oc-component-logo-paypal-color: #fff;
  --oc-component-pagination-dot-active: var(--oc-base-color-gray-150);
  --oc-component-pagination-dot-default: var(--oc-base-color-black-lighten-30);
  --oc-component-pagination-dot-selected: var(--oc-base-color-white-100);
  --oc-component-progress-bar-50-height: var(--oc-base-dimension-relative-4);
  --oc-component-progress-bar-primary-active-indicator-color: var(--oc-base-color-white-100);
  --oc-component-row-background-color: var(--oc-base-color-black-opacity-0);
  --oc-component-row-background-color-selected: var(--oc-base-color-interactive-blue-darken-15);
  --oc-component-row-background-color-selected-active: var(--oc-base-color-interactive-blue-darken-5);
  --oc-component-row-background-color-selected-hover: var(--oc-base-color-interactive-blue-darken-10);
  --oc-component-search-field-background-color: var(--oc-semantic-color-background-frame);
  --oc-component-search-field-border-color-focused: var(--oc-base-color-gray-150);
  --oc-component-search-field-border-color-hover: var(--oc-base-color-gray-400);
  --oc-component-selection-tile-border-color-selected: var(--oc-base-color-white-100);
  --oc-component-selection-tile-inner-border-color-selected: var(--oc-base-color-black-lighten-5);
  --oc-component-sheet-action-bar-background-color: var(--oc-semantic-color-background-stacked);
  --oc-component-sheet-action-bar-conditional-border-top-color: var(--oc-semantic-color-background-stacked);
  --oc-component-sheet-drag-indicator-color: #fff6;
  --oc-component-sheet-header-background-color: var(--oc-semantic-color-background-stacked);
  --oc-component-sheet-header-conditional-border-bottom-color: var(--oc-semantic-color-background-stacked);
  --oc-component-skeleton-background-color: var(--oc-base-color-black-lighten-20);
  --oc-component-skeleton-wave-color: linear-gradient(90deg, #0000 0%, #00000040 50%, #0000 100%);
  --oc-component-skeleton-wave-stop-0: #0000;
  --oc-component-skeleton-wave-stop-100: #0000;
  --oc-component-skeleton-wave-stop-50: #00000040;
  --oc-component-skip-link-appear-duration: var(--oc-semantic-transition-appear-duration);
  --oc-component-spinner-default-fill-color: var(--oc-base-color-gray-100);
  --oc-component-spinner-inverted-fill-color: var(--oc-base-color-black-100);
  --oc-component-switch-checked-background-color-active: #7ac797;
  --oc-component-switch-checked-background-color-hover: #56b87b;
  --oc-component-switch-checked-icon-color: var(--oc-base-color-success-green-100);
  --oc-component-switch-default-background-color: var(--oc-base-color-black-lighten-20);
  --oc-component-switch-default-background-color-active: var(--oc-base-color-gray-200);
  --oc-component-tab-bar-fade-stop-1: #2e2e2e;
  --oc-component-tab-bar-fade-stop-2: #2e2e2ecc;
  --oc-component-tag-service-background-color: var(--oc-base-color-service-blue-120);
  color-scheme: dark; background: var(--oc-semantic-color-background-canvas); color: var(--oc-semantic-color-text-default);
}
.stage[data-theme=onex] {
  --oc-base-color-white: var(--oc-base-color-white-100,#fff);
  --oc-component-button-100-border-radius: var(--oc-semantic-border-radius-200);
  --oc-component-button-50-border-radius: var(--oc-semantic-border-radius-150);
  --oc-component-icon-button-100-border-radius: var(--oc-semantic-border-radius-200);
  --oc-component-icon-button-50-border-radius: var(--oc-semantic-border-radius-150);
  --oc-component-search-field-border-radius: var(--oc-semantic-border-radius-250);
  --oc-component-skip-link-border-radius: var(--oc-semantic-border-radius-250);
  --oc-component-tab-bar-gradient-width: 96px;
  --oc-component-tab-item-background-color-active: var(--oc-base-color-black-opacity-10);
  --oc-component-tab-item-background-color-hover: var(--oc-base-color-black-opacity-3);}
.stage[data-ground=frame] { background: var(--oc-semantic-color-background-frame, #f0f0f0); }