/* ../node_modules/@duckduckgo/design-tokens/build/desktop-browsers/tokens.css */
:root,
:host {
--ds-color-palette-black: #000000;
--ds-color-palette-white: #ffffff;
--ds-color-palette-transparent: rgba(0, 0, 0, 0);
--ds-color-palette-gray-0: #fafafa;
--ds-color-palette-gray-10: #f5f5f5;
--ds-color-palette-gray-20: #eeeeee;
--ds-color-palette-gray-30: #dddddd;
--ds-color-palette-gray-40: #cccccc;
--ds-color-palette-gray-50: #aaaaaa;
--ds-color-palette-gray-60: #888888;
--ds-color-palette-gray-70: #666666;
--ds-color-palette-gray-80: #444444;
--ds-color-palette-gray-85: #333333;
--ds-color-palette-gray-90: #222222;
--ds-color-palette-gray-100: #111111;
--ds-color-palette-red-0: #ffd7cc;
--ds-color-palette-red-10: #f8bbaa;
--ds-color-palette-red-20: #f2a18a;
--ds-color-palette-red-30: #eb876c;
--ds-color-palette-red-40: #e46f4f;
--ds-color-palette-red-50: #de5833;
--ds-color-palette-red-60: #bc4423;
--ds-color-palette-red-70: #9a3216;
--ds-color-palette-red-80: #77230c;
--ds-color-palette-red-90: #551605;
--ds-color-palette-red-100: #330b01;
--ds-color-palette-red-alert-20: #ff545a;
--ds-color-palette-red-alert-30: #e04a4f;
--ds-color-palette-red-alert-40: #d1454a;
--ds-color-palette-red-alert-50: #eb102d;
--ds-color-palette-red-alert-60: #cf0e28;
--ds-color-palette-red-alert-70: #c10d25;
--ds-color-palette-blue-0: #ccdaff;
--ds-color-palette-blue-10: #adc2fc;
--ds-color-palette-blue-20: #8fabf9;
--ds-color-palette-blue-30: #7295f6;
--ds-color-palette-blue-40: #557ff3;
--ds-color-palette-blue-50: #3969ef;
--ds-color-palette-blue-60: #2b55ca;
--ds-color-palette-blue-70: #1e42a4;
--ds-color-palette-blue-80: #14307e;
--ds-color-palette-blue-90: #0b2059;
--ds-color-palette-blue-100: #051133;
--ds-color-palette-blue-0-transparency-01: rgba(204, 218, 255, 0.4);
--ds-color-palette-blue-0-transparency-02: rgba(204, 218, 255, 0.8);
--ds-color-palette-blue-30-transparency-01: rgba(114, 149, 246, 0.15);
--ds-color-palette-blue-30-transparency-02: rgba(114, 149, 246, 0.3);
--ds-color-palette-blue-30-transparency-03: rgba(114, 149, 246, 0.6);
--ds-color-palette-blue-30-transparency-04: rgba(114, 149, 246, 0.2);
--ds-color-palette-blue-50-transparency-01: rgba(57, 105, 239, 0.36);
--ds-color-palette-blue-50-transparency-02: rgba(57, 105, 239, 0.2);
--ds-color-palette-blue-hyperlink: #1a0dab;
--ds-color-palette-purple-0: #ece6ff;
--ds-color-palette-purple-10: #c7b9ee;
--ds-color-palette-purple-20: #a591dc;
--ds-color-palette-purple-30: #876ecb;
--ds-color-palette-purple-40: #6b4eba;
--ds-color-palette-purple-50: #5132a9;
--ds-color-palette-purple-60: #3e228c;
--ds-color-palette-purple-70: #2c146f;
--ds-color-palette-purple-80: #1d0a53;
--ds-color-palette-purple-90: #110336;
--ds-color-palette-purple-100: #070019;
--ds-color-palette-purple-hyperlink: #6c00a2;
--ds-color-palette-yellow-0: #fff7e0;
--ds-color-palette-yellow-10: #fff0c2;
--ds-color-palette-yellow-20: #ffe8a3;
--ds-color-palette-yellow-30: #ffde7a;
--ds-color-palette-yellow-40: #ffd65c;
--ds-color-palette-yellow-50: #ffcc33;
--ds-color-palette-yellow-60: #f9be1a;
--ds-color-palette-yellow-70: #e2a412;
--ds-color-palette-yellow-80: #c18010;
--ds-color-palette-yellow-90: #92540c;
--ds-color-palette-yellow-100: #5a2807;
--ds-color-palette-green-0: #d3ffcc;
--ds-color-palette-green-10: #b3f1aa;
--ds-color-palette-green-20: #96e38a;
--ds-color-palette-green-30: #7bd66d;
--ds-color-palette-green-40: #63c853;
--ds-color-palette-green-50: #4cba3c;
--ds-color-palette-green-60: #399f29;
--ds-color-palette-green-70: #288419;
--ds-color-palette-green-80: #1a690d;
--ds-color-palette-green-90: #0f4e05;
--ds-color-palette-green-100: #073300;
--ds-color-palette-green-alert-50: #21c000;
--ds-color-palette-shade-12: rgba(0, 0, 0, 0.12);
--ds-color-palette-shade-18: rgba(0, 0, 0, 0.18);
--ds-color-palette-shade-24: rgba(0, 0, 0, 0.24);
--ds-color-palette-shade-30: rgba(0, 0, 0, 0.3);
--ds-color-palette-shade-36: rgba(0, 0, 0, 0.36);
--ds-color-palette-shade-42: rgba(0, 0, 0, 0.42);
--ds-color-palette-shade-48: rgba(0, 0, 0, 0.48);
--ds-color-palette-shade-54: rgba(0, 0, 0, 0.54);
--ds-color-palette-shade-60: rgba(0, 0, 0, 0.6);
--ds-color-palette-shade-66: rgba(0, 0, 0, 0.66);
--ds-color-palette-shade-72: rgba(0, 0, 0, 0.72);
--ds-color-palette-shade-78: rgba(0, 0, 0, 0.78);
--ds-color-palette-shade-84: rgba(0, 0, 0, 0.84);
--ds-color-palette-shade-90: rgba(0, 0, 0, 0.9);
--ds-color-palette-shade-96: rgba(0, 0, 0, 0.96);
--ds-color-palette-shade-01: rgba(0, 0, 0, 0.01);
--ds-color-palette-shade-03: rgba(0, 0, 0, 0.03);
--ds-color-palette-shade-06: rgba(0, 0, 0, 0.06);
--ds-color-palette-shade-09: rgba(0, 0, 0, 0.09);
--ds-color-palette-red-shade-10: rgba(235, 16, 45, 0.1);
--ds-color-palette-red-shade-25: rgba(235, 16, 45, 0.25);
--ds-color-palette-red-tint-15: rgba(255, 84, 90, 0.15);
--ds-color-palette-red-tint-30: rgba(255, 84, 90, 0.3);
--ds-color-palette-blue-shade-40: rgba(204, 218, 255, 0.4);
--ds-color-palette-blue-shade-80: rgba(204, 218, 255, 0.8);
--ds-color-palette-blue-tint-15: rgba(114, 149, 246, 0.15);
--ds-color-palette-blue-tint-30: rgba(114, 149, 246, 0.3);
--ds-color-palette-tint-12: rgba(255, 255, 255, 0.12);
--ds-color-palette-tint-18: rgba(255, 255, 255, 0.18);
--ds-color-palette-tint-24: rgba(255, 255, 255, 0.24);
--ds-color-palette-tint-30: rgba(255, 255, 255, 0.3);
--ds-color-palette-tint-36: rgba(255, 255, 255, 0.36);
--ds-color-palette-tint-42: rgba(255, 255, 255, 0.42);
--ds-color-palette-tint-48: rgba(255, 255, 255, 0.48);
--ds-color-palette-tint-54: rgba(255, 255, 255, 0.54);
--ds-color-palette-tint-60: rgba(255, 255, 255, 0.6);
--ds-color-palette-tint-66: rgba(255, 255, 255, 0.66);
--ds-color-palette-tint-72: rgba(255, 255, 255, 0.72);
--ds-color-palette-tint-78: rgba(255, 255, 255, 0.78);
--ds-color-palette-tint-84: rgba(255, 255, 255, 0.84);
--ds-color-palette-tint-90: rgba(255, 255, 255, 0.9);
--ds-color-palette-tint-96: rgba(255, 255, 255, 0.96);
--ds-color-palette-tint-01: rgba(255, 255, 255, 0.01);
--ds-color-palette-tint-03: rgba(255, 255, 255, 0.03);
--ds-color-palette-tint-06: rgba(255, 255, 255, 0.06);
--ds-color-palette-tint-09: rgba(255, 255, 255, 0.09);
--ds-color-theme-cool-gray-dark-accent-alt-content-primary: #eeeff7;
--ds-color-theme-cool-gray-dark-accent-alt-content-secondary: rgba(238, 239, 247, 0.7);
--ds-color-theme-cool-gray-dark-accent-alt-content-tertiary: rgba(238, 239, 247, 0.5);
--ds-color-theme-cool-gray-dark-accent-alt-glow-primary: rgba(160, 182, 227, 0.2);
--ds-color-theme-cool-gray-dark-accent-alt-glow-secondary: rgba(160, 182, 227, 0.12);
--ds-color-theme-cool-gray-dark-accent-alt-primary: #516590;
--ds-color-theme-cool-gray-dark-accent-alt-secondary: #414f6b;
--ds-color-theme-cool-gray-dark-accent-alt-tertiary: #364563;
--ds-color-theme-cool-gray-dark-accent-alt-text-primary: #b5c7ec;
--ds-color-theme-cool-gray-dark-accent-alt-text-secondary: #a0b6e3;
--ds-color-theme-cool-gray-dark-accent-alt-text-tertiary: #829bce;
--ds-color-theme-cool-gray-dark-accent-content-primary: #050614;
--ds-color-theme-cool-gray-dark-accent-content-secondary: rgba(5, 6, 20, 0.7);
--ds-color-theme-cool-gray-dark-accent-content-tertiary: rgba(5, 6, 20, 0.5);
--ds-color-theme-cool-gray-dark-accent-glow-primary: rgba(160, 182, 227, 0.2);
--ds-color-theme-cool-gray-dark-accent-glow-secondary: rgba(160, 182, 227, 0.12);
--ds-color-theme-cool-gray-dark-accent-primary: #a0b6e3;
--ds-color-theme-cool-gray-dark-accent-quaternary: #5d76ab;
--ds-color-theme-cool-gray-dark-accent-secondary: #829bce;
--ds-color-theme-cool-gray-dark-accent-tertiary: #708ac1;
--ds-color-theme-cool-gray-dark-accent-text-primary: #b5c7ec;
--ds-color-theme-cool-gray-dark-accent-text-secondary: #a0b6e3;
--ds-color-theme-cool-gray-dark-accent-text-tertiary: #829bce;
--ds-color-theme-cool-gray-dark-container-border-primary: rgba(244, 244, 246, 0.09);
--ds-color-theme-cool-gray-dark-container-border-secondary: rgba(244, 244, 246, 0.12);
--ds-color-theme-cool-gray-dark-container-border-tertiary: rgba(244, 244, 246, 0.16);
--ds-color-theme-cool-gray-dark-container-fill-primary: rgba(244, 244, 246, 0.03);
--ds-color-theme-cool-gray-dark-container-fill-secondary: rgba(244, 244, 246, 0.06);
--ds-color-theme-cool-gray-dark-container-fill-tertiary: rgba(244, 244, 246, 0.09);
--ds-color-theme-cool-gray-dark-control-border-primary: rgba(198, 211, 241, 0.48);
--ds-color-theme-cool-gray-dark-control-border-quaternary: rgba(198, 211, 241, 0.8);
--ds-color-theme-cool-gray-dark-control-border-secondary: rgba(198, 211, 241, 0.64);
--ds-color-theme-cool-gray-dark-control-border-tertiary: rgba(198, 211, 241, 0.72);
--ds-color-theme-cool-gray-dark-control-fill-primary: rgba(198, 211, 241, 0.12);
--ds-color-theme-cool-gray-dark-control-fill-secondary: rgba(198, 211, 241, 0.18);
--ds-color-theme-cool-gray-dark-control-fill-tertiary: rgba(198, 211, 241, 0.24);
--ds-color-theme-cool-gray-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-cool-gray-dark-control-raised-fill-primary: rgba(221, 224, 238, 0.18);
--ds-color-theme-cool-gray-dark-destructive-content-primary: #000000;
--ds-color-theme-cool-gray-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-cool-gray-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-cool-gray-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-cool-gray-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-cool-gray-dark-destructive-primary: #ee1025;
--ds-color-theme-cool-gray-dark-destructive-secondary: #d11527;
--ds-color-theme-cool-gray-dark-destructive-tertiary: #aa1926;
--ds-color-theme-cool-gray-dark-destructive-text-primary: #ee1025;
--ds-color-theme-cool-gray-dark-destructive-text-secondary: #d11527;
--ds-color-theme-cool-gray-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-cool-gray-dark-highlight-primary: rgba(221, 224, 238, 0.12);
--ds-color-theme-cool-gray-dark-icons-primary: rgba(237, 239, 246, 0.78);
--ds-color-theme-cool-gray-dark-icons-secondary: rgba(238, 239, 247, 0.48);
--ds-color-theme-cool-gray-dark-icons-tertiary: rgba(238, 239, 247, 0.24);
--ds-color-theme-cool-gray-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-cool-gray-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-cool-gray-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-cool-gray-dark-surface-backdrop: #070a16;
--ds-color-theme-cool-gray-dark-surface-canvas: #272a3e;
--ds-color-theme-cool-gray-dark-surface-decoration-primary: rgba(221, 224, 238, 0.16);
--ds-color-theme-cool-gray-dark-surface-decoration-secondary: rgba(221, 224, 238, 0.24);
--ds-color-theme-cool-gray-dark-surface-decoration-tertiary: rgba(221, 224, 238, 0.32);
--ds-color-theme-cool-gray-dark-surface-primary: #2b2f45;
--ds-color-theme-cool-gray-dark-surface-secondary: #393d55;
--ds-color-theme-cool-gray-dark-surface-tertiary: #414662;
--ds-color-theme-cool-gray-dark-text-primary: rgba(237, 239, 246, 0.96);
--ds-color-theme-cool-gray-dark-text-secondary: rgba(238, 239, 247, 0.66);
--ds-color-theme-cool-gray-dark-text-tertiary: rgba(238, 239, 247, 0.36);
--ds-color-theme-cool-gray-dark-tone-shade-primary: rgba(11, 14, 20, 0.12);
--ds-color-theme-cool-gray-dark-tone-tint-primary: rgba(238, 238, 241, 0.06);
--ds-color-theme-cool-gray-light-accent-alt-content-primary: #1e2534;
--ds-color-theme-cool-gray-light-accent-alt-content-secondary: rgba(30, 37, 52, 0.7);
--ds-color-theme-cool-gray-light-accent-alt-content-tertiary: rgba(30, 37, 52, 0.5);
--ds-color-theme-cool-gray-light-accent-alt-glow-primary: rgba(160, 182, 227, 0.2);
--ds-color-theme-cool-gray-light-accent-alt-glow-secondary: rgba(160, 182, 227, 0.12);
--ds-color-theme-cool-gray-light-accent-alt-primary: #bccdf0;
--ds-color-theme-cool-gray-light-accent-alt-secondary: #a0b6e3;
--ds-color-theme-cool-gray-light-accent-alt-tertiary: #829bce;
--ds-color-theme-cool-gray-light-accent-alt-text-primary: #2d3a53;
--ds-color-theme-cool-gray-light-accent-alt-text-secondary: #242e42;
--ds-color-theme-cool-gray-light-accent-alt-text-tertiary: #1e2534;
--ds-color-theme-cool-gray-light-accent-content-primary: #eeeff7;
--ds-color-theme-cool-gray-light-accent-content-secondary: rgba(238, 239, 247, 0.7);
--ds-color-theme-cool-gray-light-accent-content-tertiary: rgba(238, 239, 247, 0.5);
--ds-color-theme-cool-gray-light-accent-glow-primary: rgba(40, 50, 70, 0.2);
--ds-color-theme-cool-gray-light-accent-glow-secondary: rgba(40, 50, 70, 0.12);
--ds-color-theme-cool-gray-light-accent-primary: #273145;
--ds-color-theme-cool-gray-light-accent-quaternary: #0a0d13;
--ds-color-theme-cool-gray-light-accent-secondary: #1e2534;
--ds-color-theme-cool-gray-light-accent-tertiary: #121720;
--ds-color-theme-cool-gray-light-accent-text-primary: #354463;
--ds-color-theme-cool-gray-light-accent-text-secondary: #2d3952;
--ds-color-theme-cool-gray-light-accent-text-tertiary: #242e42;
--ds-color-theme-cool-gray-light-container-border-primary: rgba(5, 6, 20, 0.06);
--ds-color-theme-cool-gray-light-container-border-secondary: rgba(5, 6, 20, 0.09);
--ds-color-theme-cool-gray-light-container-border-tertiary: rgba(5, 6, 20, 0.12);
--ds-color-theme-cool-gray-light-container-fill-primary: rgba(5, 6, 20, 0.01);
--ds-color-theme-cool-gray-light-container-fill-secondary: rgba(5, 6, 20, 0.03);
--ds-color-theme-cool-gray-light-container-fill-tertiary: rgba(5, 6, 20, 0.06);
--ds-color-theme-cool-gray-light-control-border-primary: rgba(33, 45, 68, 0.48);
--ds-color-theme-cool-gray-light-control-border-quaternary: rgba(33, 45, 69, 0.72);
--ds-color-theme-cool-gray-light-control-border-secondary: rgba(33, 45, 68, 0.56);
--ds-color-theme-cool-gray-light-control-border-tertiary: rgba(33, 45, 69, 0.64);
--ds-color-theme-cool-gray-light-control-fill-primary: rgba(33, 45, 69, 0.09);
--ds-color-theme-cool-gray-light-control-fill-secondary: rgba(33, 45, 69, 0.12);
--ds-color-theme-cool-gray-light-control-fill-tertiary: rgba(33, 45, 69, 0.18);
--ds-color-theme-cool-gray-light-control-raised-backdrop: rgba(5, 6, 20, 0.09);
--ds-color-theme-cool-gray-light-control-raised-fill-primary: #edeef2;
--ds-color-theme-cool-gray-light-destructive-content-primary: #ffffff;
--ds-color-theme-cool-gray-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-cool-gray-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-cool-gray-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-cool-gray-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-cool-gray-light-destructive-primary: #ee1025;
--ds-color-theme-cool-gray-light-destructive-secondary: #d11527;
--ds-color-theme-cool-gray-light-destructive-tertiary: #aa1826;
--ds-color-theme-cool-gray-light-destructive-text-primary: #ee1025;
--ds-color-theme-cool-gray-light-destructive-text-secondary: #d11527;
--ds-color-theme-cool-gray-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-cool-gray-light-highlight-primary: rgba(244, 244, 246, 0.24);
--ds-color-theme-cool-gray-light-icons-primary: rgba(33, 45, 69, 0.84);
--ds-color-theme-cool-gray-light-icons-secondary: rgba(33, 45, 69, 0.6);
--ds-color-theme-cool-gray-light-icons-tertiary: rgba(33, 45, 69, 0.36);
--ds-color-theme-cool-gray-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-cool-gray-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-cool-gray-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-cool-gray-light-surface-backdrop: #a7aabd;
--ds-color-theme-cool-gray-light-surface-canvas: #e3e5ec;
--ds-color-theme-cool-gray-light-surface-decoration-primary: rgba(42, 65, 111, 0.09);
--ds-color-theme-cool-gray-light-surface-decoration-secondary: rgba(42, 65, 111, 0.2);
--ds-color-theme-cool-gray-light-surface-decoration-tertiary: rgba(42, 65, 111, 0.32);
--ds-color-theme-cool-gray-light-surface-primary: #d2d5e3;
--ds-color-theme-cool-gray-light-surface-secondary: #e0e2ea;
--ds-color-theme-cool-gray-light-surface-tertiary: #edeef2;
--ds-color-theme-cool-gray-light-text-primary: rgba(5, 6, 20, 0.96);
--ds-color-theme-cool-gray-light-text-secondary: rgba(5, 6, 20, 0.6);
--ds-color-theme-cool-gray-light-text-tertiary: rgba(5, 6, 20, 0.36);
--ds-color-theme-cool-gray-light-tone-shade-primary: rgba(11, 14, 20, 0.03);
--ds-color-theme-cool-gray-light-tone-tint-primary: rgba(244, 244, 246, 0.4);
--ds-color-theme-default-dark-accent-alt-content-primary: #ccdaff;
--ds-color-theme-default-dark-accent-alt-content-secondary: #e5edff;
--ds-color-theme-default-dark-accent-alt-content-tertiary: #ffffff;
--ds-color-theme-default-dark-accent-alt-glow-primary: rgba(143, 171, 249, 0.2);
--ds-color-theme-default-dark-accent-alt-glow-secondary: rgba(143, 171, 249, 0.12);
--ds-color-theme-default-dark-accent-alt-primary: #2b55ca;
--ds-color-theme-default-dark-accent-alt-secondary: #1e42a4;
--ds-color-theme-default-dark-accent-alt-tertiary: #14307e;
--ds-color-theme-default-dark-accent-alt-text-primary: #ccdaff;
--ds-color-theme-default-dark-accent-alt-text-secondary: #adc2fc;
--ds-color-theme-default-dark-accent-alt-text-tertiary: #8fabf9;
--ds-color-theme-default-dark-accent-content-primary: #051133;
--ds-color-theme-default-dark-accent-content-secondary: rgba(5, 17, 51, 0.7);
--ds-color-theme-default-dark-accent-content-tertiary: rgba(5, 17, 51, 0.5);
--ds-color-theme-default-dark-accent-glow-primary: rgba(114, 149, 246, 0.2);
--ds-color-theme-default-dark-accent-glow-secondary: rgba(114, 149, 246, 0.12);
--ds-color-theme-default-dark-accent-primary: #8fabf9;
--ds-color-theme-default-dark-accent-quaternary: #2b55ca;
--ds-color-theme-default-dark-accent-secondary: #7295f6;
--ds-color-theme-default-dark-accent-tertiary: #557ff3;
--ds-color-theme-default-dark-accent-text-primary: #adc2fc;
--ds-color-theme-default-dark-accent-text-secondary: #8fabf9;
--ds-color-theme-default-dark-accent-text-tertiary: #7295f6;
--ds-color-theme-default-dark-container-border-primary: rgba(255, 255, 255, 0.09);
--ds-color-theme-default-dark-container-border-secondary: rgba(255, 255, 255, 0.12);
--ds-color-theme-default-dark-container-border-tertiary: rgba(255, 255, 255, 0.16);
--ds-color-theme-default-dark-container-fill-primary: rgba(255, 255, 255, 0.03);
--ds-color-theme-default-dark-container-fill-secondary: rgba(255, 255, 255, 0.06);
--ds-color-theme-default-dark-container-fill-tertiary: rgba(255, 255, 255, 0.09);
--ds-color-theme-default-dark-control-border-primary: rgba(255, 255, 255, 0.36);
--ds-color-theme-default-dark-control-border-quaternary: rgba(255, 255, 255, 0.8);
--ds-color-theme-default-dark-control-border-secondary: rgba(255, 255, 255, 0.64);
--ds-color-theme-default-dark-control-border-tertiary: rgba(255, 255, 255, 0.72);
--ds-color-theme-default-dark-control-fill-primary: rgba(255, 255, 255, 0.12);
--ds-color-theme-default-dark-control-fill-secondary: rgba(255, 255, 255, 0.18);
--ds-color-theme-default-dark-control-fill-tertiary: rgba(255, 255, 255, 0.24);
--ds-color-theme-default-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-default-dark-control-raised-fill-primary: rgba(255, 255, 255, 0.18);
--ds-color-theme-default-dark-destructive-content-primary: #000000;
--ds-color-theme-default-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-default-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-default-dark-destructive-glow-primary: rgba(255, 84, 90, 0.2);
--ds-color-theme-default-dark-destructive-glow-secondary: rgba(255, 84, 90, 0.12);
--ds-color-theme-default-dark-destructive-primary: #ff5359;
--ds-color-theme-default-dark-destructive-secondary: #d11527;
--ds-color-theme-default-dark-destructive-tertiary: #aa1926;
--ds-color-theme-default-dark-destructive-text-primary: #ff5359;
--ds-color-theme-default-dark-destructive-text-secondary: #d11527;
--ds-color-theme-default-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-default-dark-highlight-primary: rgba(249, 249, 249, 0.12);
--ds-color-theme-default-dark-icons-primary: rgba(255, 255, 255, 0.78);
--ds-color-theme-default-dark-icons-secondary: rgba(255, 255, 255, 0.48);
--ds-color-theme-default-dark-icons-tertiary: rgba(255, 255, 255, 0.24);
--ds-color-theme-default-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-default-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-default-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-default-dark-surface-backdrop: #050505;
--ds-color-theme-default-dark-surface-canvas: #1c1c1c;
--ds-color-theme-default-dark-surface-decoration-primary: rgba(255, 255, 255, 0.12);
--ds-color-theme-default-dark-surface-decoration-secondary: rgba(255, 255, 255, 0.2);
--ds-color-theme-default-dark-surface-decoration-tertiary: rgba(255, 255, 255, 0.32);
--ds-color-theme-default-dark-surface-primary: #282828;
--ds-color-theme-default-dark-surface-secondary: #333333;
--ds-color-theme-default-dark-surface-tertiary: #3d3d3d;
--ds-color-theme-default-dark-text-primary: rgba(255, 255, 255, 0.96);
--ds-color-theme-default-dark-text-secondary: rgba(255, 255, 255, 0.6);
--ds-color-theme-default-dark-text-tertiary: rgba(255, 255, 255, 0.36);
--ds-color-theme-default-dark-tone-shade-primary: rgba(0, 0, 0, 0.12);
--ds-color-theme-default-dark-tone-tint-primary: rgba(255, 255, 255, 0.06);
--ds-color-theme-default-light-accent-alt-content-primary: #0b2059;
--ds-color-theme-default-light-accent-alt-content-secondary: rgba(11, 32, 89, 0.7);
--ds-color-theme-default-light-accent-alt-content-tertiary: rgba(11, 32, 89, 0.5);
--ds-color-theme-default-light-accent-alt-glow-primary: rgba(114, 149, 246, 0.2);
--ds-color-theme-default-light-accent-alt-glow-secondary: rgba(114, 149, 246, 0.12);
--ds-color-theme-default-light-accent-alt-primary: #ccdaff;
--ds-color-theme-default-light-accent-alt-secondary: #adc2fc;
--ds-color-theme-default-light-accent-alt-tertiary: #8fabf9;
--ds-color-theme-default-light-accent-alt-text-primary: #1e42a4;
--ds-color-theme-default-light-accent-alt-text-secondary: #14307e;
--ds-color-theme-default-light-accent-alt-text-tertiary: #0b2059;
--ds-color-theme-default-light-accent-content-primary: #ffffff;
--ds-color-theme-default-light-accent-content-secondary: rgba(255, 255, 255, 0.7);
--ds-color-theme-default-light-accent-content-tertiary: rgba(255, 255, 255, 0.5);
--ds-color-theme-default-light-accent-glow-primary: rgba(57, 105, 239, 0.2);
--ds-color-theme-default-light-accent-glow-secondary: rgba(57, 105, 239, 0.12);
--ds-color-theme-default-light-accent-primary: #3869ef;
--ds-color-theme-default-light-accent-quaternary: #14307e;
--ds-color-theme-default-light-accent-secondary: #2b55ca;
--ds-color-theme-default-light-accent-tertiary: #1e42a4;
--ds-color-theme-default-light-accent-text-primary: #3869ef;
--ds-color-theme-default-light-accent-text-secondary: #2b55ca;
--ds-color-theme-default-light-accent-text-tertiary: #1e42a4;
--ds-color-theme-default-light-container-border-primary: rgba(0, 0, 0, 0.06);
--ds-color-theme-default-light-container-border-secondary: rgba(0, 0, 0, 0.09);
--ds-color-theme-default-light-container-border-tertiary: rgba(0, 0, 0, 0.12);
--ds-color-theme-default-light-container-fill-primary: rgba(0, 0, 0, 0.01);
--ds-color-theme-default-light-container-fill-secondary: rgba(0, 0, 0, 0.03);
--ds-color-theme-default-light-container-fill-tertiary: rgba(0, 0, 0, 0.06);
--ds-color-theme-default-light-control-border-primary: rgba(0, 0, 0, 0.3);
--ds-color-theme-default-light-control-border-quaternary: rgba(0, 0, 0, 0.72);
--ds-color-theme-default-light-control-border-secondary: rgba(0, 0, 0, 0.48);
--ds-color-theme-default-light-control-border-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-default-light-control-fill-primary: rgba(0, 0, 0, 0.06);
--ds-color-theme-default-light-control-fill-secondary: rgba(0, 0, 0, 0.09);
--ds-color-theme-default-light-control-fill-tertiary: rgba(0, 0, 0, 0.12);
--ds-color-theme-default-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-default-light-control-raised-fill-primary: #ffffff;
--ds-color-theme-default-light-destructive-content-primary: #ffffff;
--ds-color-theme-default-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-default-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-default-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-default-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-default-light-destructive-primary: #ee1025;
--ds-color-theme-default-light-destructive-secondary: #d11527;
--ds-color-theme-default-light-destructive-tertiary: #aa1826;
--ds-color-theme-default-light-destructive-text-primary: #ee1025;
--ds-color-theme-default-light-destructive-text-secondary: #d11527;
--ds-color-theme-default-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-default-light-highlight-primary: rgba(255, 255, 255, 0.24);
--ds-color-theme-default-light-icons-primary: rgba(0, 0, 0, 0.84);
--ds-color-theme-default-light-icons-secondary: rgba(0, 0, 0, 0.6);
--ds-color-theme-default-light-icons-tertiary: rgba(0, 0, 0, 0.36);
--ds-color-theme-default-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-default-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-default-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-default-light-surface-backdrop: #e0e0e0;
--ds-color-theme-default-light-surface-canvas: #fafafa;
--ds-color-theme-default-light-surface-decoration-primary: rgba(0, 0, 0, 0.09);
--ds-color-theme-default-light-surface-decoration-secondary: rgba(0, 0, 0, 0.16);
--ds-color-theme-default-light-surface-decoration-tertiary: rgba(0, 0, 0, 0.24);
--ds-color-theme-default-light-surface-primary: #f2f2f2;
--ds-color-theme-default-light-surface-secondary: #fafafa;
--ds-color-theme-default-light-surface-tertiary: #ffffff;
--ds-color-theme-default-light-text-primary: rgba(0, 0, 0, 0.96);
--ds-color-theme-default-light-text-secondary: rgba(0, 0, 0, 0.6);
--ds-color-theme-default-light-text-tertiary: rgba(0, 0, 0, 0.36);
--ds-color-theme-default-light-tone-shade-primary: rgba(0, 0, 0, 0.03);
--ds-color-theme-default-light-tone-tint-primary: rgba(255, 255, 255, 0.32);
--ds-color-theme-desert-dark-accent-alt-content-primary: #fdfaf7;
--ds-color-theme-desert-dark-accent-alt-content-secondary: rgba(253, 250, 247, 0.7);
--ds-color-theme-desert-dark-accent-alt-content-tertiary: rgba(253, 250, 247, 0.5);
--ds-color-theme-desert-dark-accent-alt-glow-primary: rgba(255, 165, 61, 0.2);
--ds-color-theme-desert-dark-accent-alt-glow-secondary: rgba(255, 165, 61, 0.12);
--ds-color-theme-desert-dark-accent-alt-primary: #d14200;
--ds-color-theme-desert-dark-accent-alt-secondary: #c13600;
--ds-color-theme-desert-dark-accent-alt-tertiary: #b73000;
--ds-color-theme-desert-dark-accent-alt-text-primary: #ffcc66;
--ds-color-theme-desert-dark-accent-alt-text-secondary: #ffa43d;
--ds-color-theme-desert-dark-accent-alt-text-tertiary: #ff6a00;
--ds-color-theme-desert-dark-accent-content-primary: #17150f;
--ds-color-theme-desert-dark-accent-content-secondary: rgba(23, 21, 15, 0.7);
--ds-color-theme-desert-dark-accent-content-tertiary: rgba(23, 21, 15, 0.5);
--ds-color-theme-desert-dark-accent-glow-primary: rgba(255, 165, 61, 0.2);
--ds-color-theme-desert-dark-accent-glow-secondary: rgba(255, 165, 61, 0.12);
--ds-color-theme-desert-dark-accent-primary: #ffa43d;
--ds-color-theme-desert-dark-accent-quaternary: #d65900;
--ds-color-theme-desert-dark-accent-secondary: #ff8914;
--ds-color-theme-desert-dark-accent-tertiary: #ff6a00;
--ds-color-theme-desert-dark-accent-text-primary: #ffcc66;
--ds-color-theme-desert-dark-accent-text-secondary: #ffa43d;
--ds-color-theme-desert-dark-accent-text-tertiary: #ff6a00;
--ds-color-theme-desert-dark-container-border-primary: rgba(249, 248, 246, 0.09);
--ds-color-theme-desert-dark-container-border-secondary: rgba(249, 248, 246, 0.12);
--ds-color-theme-desert-dark-container-border-tertiary: rgba(249, 248, 246, 0.16);
--ds-color-theme-desert-dark-container-fill-primary: rgba(249, 248, 246, 0.03);
--ds-color-theme-desert-dark-container-fill-secondary: rgba(249, 248, 246, 0.06);
--ds-color-theme-desert-dark-container-fill-tertiary: rgba(249, 248, 246, 0.09);
--ds-color-theme-desert-dark-control-border-primary: rgba(237, 232, 222, 0.32);
--ds-color-theme-desert-dark-control-border-quaternary: rgba(237, 232, 222, 0.72);
--ds-color-theme-desert-dark-control-border-secondary: rgba(237, 232, 222, 0.48);
--ds-color-theme-desert-dark-control-border-tertiary: rgba(237, 232, 222, 0.64);
--ds-color-theme-desert-dark-control-fill-primary: rgba(237, 232, 222, 0.12);
--ds-color-theme-desert-dark-control-fill-secondary: rgba(237, 232, 222, 0.18);
--ds-color-theme-desert-dark-control-fill-tertiary: rgba(237, 232, 222, 0.24);
--ds-color-theme-desert-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-desert-dark-control-raised-fill-primary: rgba(245, 250, 244, 0.18);
--ds-color-theme-desert-dark-destructive-content-primary: #000000;
--ds-color-theme-desert-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-desert-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-desert-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-desert-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-desert-dark-destructive-primary: #ee1025;
--ds-color-theme-desert-dark-destructive-secondary: #d11527;
--ds-color-theme-desert-dark-destructive-tertiary: #aa1926;
--ds-color-theme-desert-dark-destructive-text-primary: #ee1025;
--ds-color-theme-desert-dark-destructive-text-secondary: #d11527;
--ds-color-theme-desert-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-desert-dark-highlight-primary: rgba(245, 250, 244, 0.12);
--ds-color-theme-desert-dark-icons-primary: rgba(253, 250, 247, 0.78);
--ds-color-theme-desert-dark-icons-secondary: rgba(253, 250, 247, 0.48);
--ds-color-theme-desert-dark-icons-tertiary: rgba(253, 250, 247, 0.24);
--ds-color-theme-desert-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-desert-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-desert-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-desert-dark-surface-backdrop: #1c1916;
--ds-color-theme-desert-dark-surface-canvas: #312e2a;
--ds-color-theme-desert-dark-surface-decoration-primary: rgba(237, 232, 222, 0.12);
--ds-color-theme-desert-dark-surface-decoration-secondary: rgba(237, 232, 222, 0.2);
--ds-color-theme-desert-dark-surface-decoration-tertiary: rgba(237, 232, 222, 0.32);
--ds-color-theme-desert-dark-surface-primary: #37332e;
--ds-color-theme-desert-dark-surface-secondary: #423e38;
--ds-color-theme-desert-dark-surface-tertiary: #4a453f;
--ds-color-theme-desert-dark-text-primary: rgba(253, 252, 250, 0.96);
--ds-color-theme-desert-dark-text-secondary: rgba(254, 252, 251, 0.66);
--ds-color-theme-desert-dark-text-tertiary: rgba(254, 252, 251, 0.36);
--ds-color-theme-desert-dark-tone-shade-primary: rgba(18, 16, 12, 0.16);
--ds-color-theme-desert-dark-tone-tint-primary: rgba(237, 232, 222, 0.06);
--ds-color-theme-desert-light-accent-alt-content-primary: #331100;
--ds-color-theme-desert-light-accent-alt-content-secondary: rgba(51, 17, 0, 0.7);
--ds-color-theme-desert-light-accent-alt-content-tertiary: rgba(51, 17, 0, 0.5);
--ds-color-theme-desert-light-accent-alt-glow-primary: rgba(255, 165, 61, 0.2);
--ds-color-theme-desert-light-accent-alt-glow-secondary: rgba(255, 165, 61, 0.12);
--ds-color-theme-desert-light-accent-alt-primary: #ffb766;
--ds-color-theme-desert-light-accent-alt-secondary: #ffa43d;
--ds-color-theme-desert-light-accent-alt-tertiary: #ff8914;
--ds-color-theme-desert-light-accent-alt-text-primary: #c13600;
--ds-color-theme-desert-light-accent-alt-text-secondary: #b73000;
--ds-color-theme-desert-light-accent-alt-text-tertiary: #a32b00;
--ds-color-theme-desert-light-accent-content-primary: #fcfcfb;
--ds-color-theme-desert-light-accent-content-secondary: rgba(253, 253, 252, 0.7);
--ds-color-theme-desert-light-accent-content-tertiary: rgba(253, 253, 252, 0.5);
--ds-color-theme-desert-light-accent-glow-primary: rgba(209, 66, 0, 0.2);
--ds-color-theme-desert-light-accent-glow-secondary: rgba(209, 66, 0, 0.12);
--ds-color-theme-desert-light-accent-primary: #d14200;
--ds-color-theme-desert-light-accent-quaternary: #a32b00;
--ds-color-theme-desert-light-accent-secondary: #c13600;
--ds-color-theme-desert-light-accent-tertiary: #b73000;
--ds-color-theme-desert-light-accent-text-primary: #c13600;
--ds-color-theme-desert-light-accent-text-secondary: #b73000;
--ds-color-theme-desert-light-accent-text-tertiary: #a32b00;
--ds-color-theme-desert-light-container-border-primary: rgba(23, 21, 15, 0.06);
--ds-color-theme-desert-light-container-border-secondary: rgba(23, 21, 15, 0.09);
--ds-color-theme-desert-light-container-border-tertiary: rgba(23, 21, 15, 0.12);
--ds-color-theme-desert-light-container-fill-primary: rgba(23, 21, 15, 0.01);
--ds-color-theme-desert-light-container-fill-secondary: rgba(23, 21, 15, 0.03);
--ds-color-theme-desert-light-container-fill-tertiary: rgba(23, 21, 15, 0.06);
--ds-color-theme-desert-light-control-border-primary: rgba(115, 98, 73, 0.32);
--ds-color-theme-desert-light-control-border-quaternary: rgba(115, 98, 73, 0.72);
--ds-color-theme-desert-light-control-border-secondary: rgba(115, 98, 73, 0.48);
--ds-color-theme-desert-light-control-border-tertiary: rgba(115, 98, 73, 0.64);
--ds-color-theme-desert-light-control-fill-primary: rgba(115, 98, 73, 0.09);
--ds-color-theme-desert-light-control-fill-secondary: rgba(115, 98, 73, 0.12);
--ds-color-theme-desert-light-control-fill-tertiary: rgba(115, 98, 73, 0.18);
--ds-color-theme-desert-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-desert-light-control-raised-fill-primary: #fbfaf9;
--ds-color-theme-desert-light-destructive-content-primary: #ffffff;
--ds-color-theme-desert-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-desert-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-desert-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-desert-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-desert-light-destructive-primary: #ee1025;
--ds-color-theme-desert-light-destructive-secondary: #d11527;
--ds-color-theme-desert-light-destructive-tertiary: #aa1826;
--ds-color-theme-desert-light-destructive-text-primary: #ee1025;
--ds-color-theme-desert-light-destructive-text-secondary: #d11527;
--ds-color-theme-desert-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-desert-light-highlight-primary: rgba(253, 250, 247, 0.24);
--ds-color-theme-desert-light-icons-primary: rgba(23, 21, 15, 0.84);
--ds-color-theme-desert-light-icons-secondary: rgba(23, 21, 15, 0.66);
--ds-color-theme-desert-light-icons-tertiary: rgba(23, 21, 15, 0.36);
--ds-color-theme-desert-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-desert-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-desert-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-desert-light-surface-backdrop: #c6b99e;
--ds-color-theme-desert-light-surface-canvas: #f5f4ef;
--ds-color-theme-desert-light-surface-decoration-primary: rgba(115, 98, 73, 0.12);
--ds-color-theme-desert-light-surface-decoration-secondary: rgba(115, 98, 73, 0.2);
--ds-color-theme-desert-light-surface-decoration-tertiary: rgba(115, 98, 73, 0.32);
--ds-color-theme-desert-light-surface-primary: #eee9e1;
--ds-color-theme-desert-light-surface-secondary: #f5f3ef;
--ds-color-theme-desert-light-surface-tertiary: #fafaf8;
--ds-color-theme-desert-light-text-primary: rgba(23, 21, 15, 0.96);
--ds-color-theme-desert-light-text-secondary: rgba(23, 21, 15, 0.6);
--ds-color-theme-desert-light-text-tertiary: rgba(23, 21, 15, 0.36);
--ds-color-theme-desert-light-tone-shade-primary: rgba(0, 0, 0, 0.06);
--ds-color-theme-desert-light-tone-tint-primary: rgba(255, 255, 255, 0.32);
--ds-color-theme-green-dark-accent-alt-content-primary: #e6f2ea;
--ds-color-theme-green-dark-accent-alt-content-secondary: rgba(230, 242, 234, 0.7);
--ds-color-theme-green-dark-accent-alt-content-tertiary: rgba(230, 242, 234, 0.5);
--ds-color-theme-green-dark-accent-alt-glow-primary: rgba(110, 199, 162, 0.2);
--ds-color-theme-green-dark-accent-alt-glow-secondary: rgba(110, 199, 162, 0.12);
--ds-color-theme-green-dark-accent-alt-primary: #2c6645;
--ds-color-theme-green-dark-accent-alt-secondary: #235136;
--ds-color-theme-green-dark-accent-alt-tertiary: #193926;
--ds-color-theme-green-dark-accent-alt-text-primary: #85e0ba;
--ds-color-theme-green-dark-accent-alt-text-secondary: #6ec7a2;
--ds-color-theme-green-dark-accent-alt-text-tertiary: #48b186;
--ds-color-theme-green-dark-accent-content-primary: #0b1914;
--ds-color-theme-green-dark-accent-content-secondary: rgba(11, 25, 20, 0.7);
--ds-color-theme-green-dark-accent-content-tertiary: rgba(11, 25, 20, 0.5);
--ds-color-theme-green-dark-accent-glow-primary: rgba(110, 199, 162, 0.2);
--ds-color-theme-green-dark-accent-glow-secondary: rgba(110, 199, 162, 0.12);
--ds-color-theme-green-dark-accent-primary: #6ec7a2;
--ds-color-theme-green-dark-accent-quaternary: #21815a;
--ds-color-theme-green-dark-accent-secondary: #48b186;
--ds-color-theme-green-dark-accent-tertiary: #299c6d;
--ds-color-theme-green-dark-accent-text-primary: #85e0ba;
--ds-color-theme-green-dark-accent-text-secondary: #6ec7a2;
--ds-color-theme-green-dark-accent-text-tertiary: #48b186;
--ds-color-theme-green-dark-container-border-primary: rgba(217, 242, 229, 0.09);
--ds-color-theme-green-dark-container-border-secondary: rgba(217, 242, 229, 0.12);
--ds-color-theme-green-dark-container-border-tertiary: rgba(217, 242, 229, 0.16);
--ds-color-theme-green-dark-container-fill-primary: rgba(217, 242, 229, 0.02);
--ds-color-theme-green-dark-container-fill-secondary: rgba(217, 242, 229, 0.04);
--ds-color-theme-green-dark-container-fill-tertiary: rgba(217, 242, 229, 0.06);
--ds-color-theme-green-dark-control-border-primary: rgba(136, 221, 186, 0.24);
--ds-color-theme-green-dark-control-border-quaternary: rgba(136, 221, 186, 0.8);
--ds-color-theme-green-dark-control-border-secondary: rgba(136, 221, 186, 0.64);
--ds-color-theme-green-dark-control-border-tertiary: rgba(136, 221, 186, 0.72);
--ds-color-theme-green-dark-control-fill-primary: rgba(136, 221, 186, 0.12);
--ds-color-theme-green-dark-control-fill-secondary: rgba(136, 221, 186, 0.18);
--ds-color-theme-green-dark-control-fill-tertiary: rgba(136, 221, 186, 0.24);
--ds-color-theme-green-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-green-dark-control-raised-fill-primary: rgba(230, 242, 234, 0.18);
--ds-color-theme-green-dark-destructive-content-primary: #000000;
--ds-color-theme-green-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-green-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-green-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-green-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-green-dark-destructive-primary: #ee1025;
--ds-color-theme-green-dark-destructive-secondary: #d11527;
--ds-color-theme-green-dark-destructive-tertiary: #aa1926;
--ds-color-theme-green-dark-destructive-text-primary: #ee1025;
--ds-color-theme-green-dark-destructive-text-secondary: #d11527;
--ds-color-theme-green-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-green-dark-highlight-primary: rgba(230, 242, 234, 0.12);
--ds-color-theme-green-dark-icons-primary: rgba(230, 242, 234, 0.78);
--ds-color-theme-green-dark-icons-secondary: rgba(230, 242, 234, 0.48);
--ds-color-theme-green-dark-icons-tertiary: rgba(230, 242, 234, 0.24);
--ds-color-theme-green-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-green-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-green-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-green-dark-surface-backdrop: #0f241c;
--ds-color-theme-green-dark-surface-canvas: #1c342b;
--ds-color-theme-green-dark-surface-decoration-primary: rgba(136, 221, 186, 0.16);
--ds-color-theme-green-dark-surface-decoration-secondary: rgba(136, 221, 186, 0.24);
--ds-color-theme-green-dark-surface-decoration-tertiary: rgba(136, 221, 186, 0.32);
--ds-color-theme-green-dark-surface-primary: #203b30;
--ds-color-theme-green-dark-surface-secondary: #244133;
--ds-color-theme-green-dark-surface-tertiary: #2d4d3e;
--ds-color-theme-green-dark-text-primary: rgba(242, 248, 244, 0.96);
--ds-color-theme-green-dark-text-secondary: rgba(242, 248, 244, 0.66);
--ds-color-theme-green-dark-text-tertiary: rgba(242, 248, 244, 0.36);
--ds-color-theme-green-dark-tone-shade-primary: rgba(9, 21, 16, 0.16);
--ds-color-theme-green-dark-tone-tint-primary: rgba(230, 248, 241, 0.06);
--ds-color-theme-green-light-accent-alt-content-primary: #193926;
--ds-color-theme-green-light-accent-alt-content-secondary: rgba(25, 57, 38, 0.7);
--ds-color-theme-green-light-accent-alt-content-tertiary: rgba(25, 57, 38, 0.5);
--ds-color-theme-green-light-accent-alt-glow-primary: rgba(133, 224, 186, 0.2);
--ds-color-theme-green-light-accent-alt-glow-secondary: rgba(133, 224, 186, 0.12);
--ds-color-theme-green-light-accent-alt-primary: #99eac8;
--ds-color-theme-green-light-accent-alt-secondary: #85e0ba;
--ds-color-theme-green-light-accent-alt-tertiary: #6ec7a2;
--ds-color-theme-green-light-accent-alt-text-primary: #2c6645;
--ds-color-theme-green-light-accent-alt-text-secondary: #235136;
--ds-color-theme-green-light-accent-alt-text-tertiary: #193926;
--ds-color-theme-green-light-accent-content-primary: #f5fbf4;
--ds-color-theme-green-light-accent-content-secondary: rgba(245, 251, 244, 0.7);
--ds-color-theme-green-light-accent-content-tertiary: rgba(245, 251, 244, 0.5);
--ds-color-theme-green-light-accent-glow-primary: rgba(56, 128, 86, 0.2);
--ds-color-theme-green-light-accent-glow-secondary: rgba(56, 128, 86, 0.12);
--ds-color-theme-green-light-accent-primary: #377f55;
--ds-color-theme-green-light-accent-quaternary: #183826;
--ds-color-theme-green-light-accent-secondary: #2c6645;
--ds-color-theme-green-light-accent-tertiary: #235136;
--ds-color-theme-green-light-accent-text-primary: #2c6645;
--ds-color-theme-green-light-accent-text-secondary: #235136;
--ds-color-theme-green-light-accent-text-tertiary: #193926;
--ds-color-theme-green-light-container-border-primary: rgba(6, 37, 4, 0.09);
--ds-color-theme-green-light-container-border-secondary: rgba(6, 37, 4, 0.12);
--ds-color-theme-green-light-container-border-tertiary: rgba(6, 37, 4, 0.16);
--ds-color-theme-green-light-container-fill-primary: rgba(6, 37, 4, 0.02);
--ds-color-theme-green-light-container-fill-secondary: rgba(6, 37, 4, 0.04);
--ds-color-theme-green-light-container-fill-tertiary: rgba(6, 37, 4, 0.06);
--ds-color-theme-green-light-control-border-primary: rgba(40, 138, 81, 0.32);
--ds-color-theme-green-light-control-border-quaternary: rgba(40, 138, 81, 0.72);
--ds-color-theme-green-light-control-border-secondary: rgba(40, 138, 81, 0.56);
--ds-color-theme-green-light-control-border-tertiary: rgba(40, 138, 81, 0.64);
--ds-color-theme-green-light-control-fill-primary: rgba(40, 138, 81, 0.09);
--ds-color-theme-green-light-control-fill-secondary: rgba(40, 138, 81, 0.12);
--ds-color-theme-green-light-control-fill-tertiary: rgba(40, 138, 81, 0.18);
--ds-color-theme-green-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-green-light-control-raised-fill-primary: #f8fcf7;
--ds-color-theme-green-light-destructive-content-primary: #ffffff;
--ds-color-theme-green-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-green-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-green-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-green-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-green-light-destructive-primary: #ee1025;
--ds-color-theme-green-light-destructive-secondary: #d11527;
--ds-color-theme-green-light-destructive-tertiary: #aa1826;
--ds-color-theme-green-light-destructive-text-primary: #ee1025;
--ds-color-theme-green-light-destructive-text-secondary: #d11527;
--ds-color-theme-green-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-green-light-highlight-primary: rgba(245, 250, 244, 0.24);
--ds-color-theme-green-light-icons-primary: rgba(6, 37, 4, 0.84);
--ds-color-theme-green-light-icons-secondary: rgba(6, 37, 4, 0.6);
--ds-color-theme-green-light-icons-tertiary: rgba(6, 37, 4, 0.36);
--ds-color-theme-green-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-green-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-green-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-green-light-surface-backdrop: #b5d0ad;
--ds-color-theme-green-light-surface-canvas: #ecf5ea;
--ds-color-theme-green-light-surface-decoration-primary: rgba(31, 147, 80, 0.12);
--ds-color-theme-green-light-surface-decoration-secondary: rgba(31, 147, 80, 0.2);
--ds-color-theme-green-light-surface-decoration-tertiary: rgba(31, 147, 80, 0.32);
--ds-color-theme-green-light-surface-primary: #e3eee1;
--ds-color-theme-green-light-surface-secondary: #ecf4eb;
--ds-color-theme-green-light-surface-tertiary: #f8fcf7;
--ds-color-theme-green-light-text-primary: rgba(4, 28, 3, 0.96);
--ds-color-theme-green-light-text-secondary: rgba(4, 28, 3, 0.6);
--ds-color-theme-green-light-text-tertiary: rgba(4, 28, 3, 0.36);
--ds-color-theme-green-light-tone-shade-primary: rgba(6, 37, 4, 0.06);
--ds-color-theme-green-light-tone-tint-primary: rgba(247, 252, 250, 0.4);
--ds-color-theme-orange-dark-accent-alt-content-primary: #fff9f0;
--ds-color-theme-orange-dark-accent-alt-content-secondary: rgba(255, 249, 240, 0.7);
--ds-color-theme-orange-dark-accent-alt-content-tertiary: rgba(255, 249, 240, 0.5);
--ds-color-theme-orange-dark-accent-alt-glow-primary: rgba(255, 129, 51, 0.2);
--ds-color-theme-orange-dark-accent-alt-glow-secondary: rgba(255, 129, 51, 0.12);
--ds-color-theme-orange-dark-accent-alt-primary: #ef5300;
--ds-color-theme-orange-dark-accent-alt-secondary: #c64200;
--ds-color-theme-orange-dark-accent-alt-tertiary: #d65200;
--ds-color-theme-orange-dark-accent-alt-text-primary: #ff9f19;
--ds-color-theme-orange-dark-accent-alt-text-secondary: #f48200;
--ds-color-theme-orange-dark-accent-alt-text-tertiary: #ef6b00;
--ds-color-theme-orange-dark-accent-content-primary: #1a0900;
--ds-color-theme-orange-dark-accent-content-secondary: rgba(26, 9, 0, 0.7);
--ds-color-theme-orange-dark-accent-content-tertiary: rgba(26, 9, 0, 0.5);
--ds-color-theme-orange-dark-accent-glow-primary: rgba(255, 129, 51, 0.2);
--ds-color-theme-orange-dark-accent-glow-secondary: rgba(255, 129, 51, 0.12);
--ds-color-theme-orange-dark-accent-primary: #ff8133;
--ds-color-theme-orange-dark-accent-quaternary: #d65200;
--ds-color-theme-orange-dark-accent-secondary: #ff6200;
--ds-color-theme-orange-dark-accent-tertiary: #ef5300;
--ds-color-theme-orange-dark-accent-text-primary: #ff9f19;
--ds-color-theme-orange-dark-accent-text-secondary: #f48200;
--ds-color-theme-orange-dark-accent-text-tertiary: #ef6b00;
--ds-color-theme-orange-dark-container-border-primary: rgba(255, 251, 245, 0.09);
--ds-color-theme-orange-dark-container-border-secondary: rgba(255, 251, 245, 0.12);
--ds-color-theme-orange-dark-container-border-tertiary: rgba(255, 251, 245, 0.16);
--ds-color-theme-orange-dark-container-fill-primary: rgba(255, 251, 245, 0.03);
--ds-color-theme-orange-dark-container-fill-secondary: rgba(255, 251, 245, 0.06);
--ds-color-theme-orange-dark-container-fill-tertiary: rgba(255, 251, 245, 0.09);
--ds-color-theme-orange-dark-control-border-primary: rgba(255, 165, 77, 0.48);
--ds-color-theme-orange-dark-control-border-quaternary: rgba(255, 165, 77, 0.8);
--ds-color-theme-orange-dark-control-border-secondary: rgba(255, 165, 77, 0.64);
--ds-color-theme-orange-dark-control-border-tertiary: rgba(255, 165, 77, 0.72);
--ds-color-theme-orange-dark-control-fill-primary: rgba(255, 165, 77, 0.12);
--ds-color-theme-orange-dark-control-fill-secondary: rgba(255, 165, 77, 0.18);
--ds-color-theme-orange-dark-control-fill-tertiary: rgba(255, 165, 77, 0.24);
--ds-color-theme-orange-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-orange-dark-control-raised-fill-primary: rgba(255, 249, 240, 0.18);
--ds-color-theme-orange-dark-destructive-content-primary: #000000;
--ds-color-theme-orange-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-orange-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-orange-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-orange-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-orange-dark-destructive-primary: #ee1025;
--ds-color-theme-orange-dark-destructive-secondary: #d11527;
--ds-color-theme-orange-dark-destructive-tertiary: #aa1926;
--ds-color-theme-orange-dark-destructive-text-primary: #ee1025;
--ds-color-theme-orange-dark-destructive-text-secondary: #d11527;
--ds-color-theme-orange-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-orange-dark-highlight-primary: rgba(255, 249, 240, 0.12);
--ds-color-theme-orange-dark-icons-primary: rgba(253, 234, 206, 0.78);
--ds-color-theme-orange-dark-icons-secondary: rgba(253, 234, 206, 0.48);
--ds-color-theme-orange-dark-icons-tertiary: rgba(253, 234, 206, 0.24);
--ds-color-theme-orange-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-orange-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-orange-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-orange-dark-surface-backdrop: #330d00;
--ds-color-theme-orange-dark-surface-canvas: #4a200c;
--ds-color-theme-orange-dark-surface-decoration-primary: rgba(255, 165, 77, 0.16);
--ds-color-theme-orange-dark-surface-decoration-secondary: rgba(255, 165, 77, 0.24);
--ds-color-theme-orange-dark-surface-decoration-tertiary: rgba(255, 165, 77, 0.32);
--ds-color-theme-orange-dark-surface-primary: #54240c;
--ds-color-theme-orange-dark-surface-secondary: #622e0e;
--ds-color-theme-orange-dark-surface-tertiary: #6e350c;
--ds-color-theme-orange-dark-text-primary: rgba(255, 244, 229, 0.96);
--ds-color-theme-orange-dark-text-secondary: rgba(255, 244, 229, 0.66);
--ds-color-theme-orange-dark-text-tertiary: rgba(255, 245, 229, 0.36);
--ds-color-theme-orange-dark-tone-shade-primary: rgba(26, 9, 0, 0.16);
--ds-color-theme-orange-dark-tone-tint-primary: rgba(254, 238, 215, 0.06);
--ds-color-theme-orange-light-accent-alt-content-primary: #331100;
--ds-color-theme-orange-light-accent-alt-content-secondary: rgba(51, 17, 0, 0.7);
--ds-color-theme-orange-light-accent-alt-content-tertiary: rgba(51, 17, 0, 0.5);
--ds-color-theme-orange-light-accent-alt-glow-primary: rgba(255, 159, 26, 0.2);
--ds-color-theme-orange-light-accent-alt-glow-secondary: rgba(255, 159, 26, 0.12);
--ds-color-theme-orange-light-accent-alt-primary: #ffbf66;
--ds-color-theme-orange-light-accent-alt-secondary: #ff9f19;
--ds-color-theme-orange-light-accent-alt-tertiary: #ef6b00;
--ds-color-theme-orange-light-accent-alt-text-primary: #c64200;
--ds-color-theme-orange-light-accent-alt-text-secondary: #ad3400;
--ds-color-theme-orange-light-accent-alt-text-tertiary: #932900;
--ds-color-theme-orange-light-accent-content-primary: #331100;
--ds-color-theme-orange-light-accent-content-secondary: rgba(51, 17, 0, 0.7);
--ds-color-theme-orange-light-accent-content-tertiary: rgba(51, 17, 0, 0.5);
--ds-color-theme-orange-light-accent-glow-primary: rgba(255, 159, 26, 0.2);
--ds-color-theme-orange-light-accent-glow-secondary: rgba(255, 159, 26, 0.12);
--ds-color-theme-orange-light-accent-primary: #ff9f19;
--ds-color-theme-orange-light-accent-quaternary: #ef5300;
--ds-color-theme-orange-light-accent-secondary: #f48200;
--ds-color-theme-orange-light-accent-tertiary: #ef6b00;
--ds-color-theme-orange-light-accent-text-primary: #c64200;
--ds-color-theme-orange-light-accent-text-secondary: #ad3400;
--ds-color-theme-orange-light-accent-text-tertiary: #932900;
--ds-color-theme-orange-light-container-border-primary: rgba(41, 14, 0, 0.06);
--ds-color-theme-orange-light-container-border-secondary: rgba(41, 14, 0, 0.09);
--ds-color-theme-orange-light-container-border-tertiary: rgba(41, 14, 0, 0.12);
--ds-color-theme-orange-light-container-fill-primary: rgba(41, 14, 0, 0.02);
--ds-color-theme-orange-light-container-fill-secondary: rgba(41, 14, 0, 0.04);
--ds-color-theme-orange-light-container-fill-tertiary: rgba(41, 14, 0, 0.06);
--ds-color-theme-orange-light-control-border-primary: rgba(204, 85, 0, 0.32);
--ds-color-theme-orange-light-control-border-quaternary: rgba(204, 85, 0, 0.72);
--ds-color-theme-orange-light-control-border-secondary: rgba(204, 85, 0, 0.56);
--ds-color-theme-orange-light-control-border-tertiary: rgba(204, 85, 0, 0.64);
--ds-color-theme-orange-light-control-fill-primary: rgba(204, 85, 0, 0.09);
--ds-color-theme-orange-light-control-fill-secondary: rgba(204, 85, 0, 0.12);
--ds-color-theme-orange-light-control-fill-tertiary: rgba(204, 85, 0, 0.18);
--ds-color-theme-orange-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-orange-light-control-raised-fill-primary: #fff9f0;
--ds-color-theme-orange-light-destructive-content-primary: #ffffff;
--ds-color-theme-orange-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-orange-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-orange-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-orange-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-orange-light-destructive-primary: #ee1025;
--ds-color-theme-orange-light-destructive-secondary: #d11527;
--ds-color-theme-orange-light-destructive-tertiary: #aa1826;
--ds-color-theme-orange-light-destructive-text-primary: #ee1025;
--ds-color-theme-orange-light-destructive-text-secondary: #d11527;
--ds-color-theme-orange-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-orange-light-highlight-primary: rgba(255, 249, 240, 0.24);
--ds-color-theme-orange-light-icons-primary: rgba(26, 9, 0, 0.84);
--ds-color-theme-orange-light-icons-secondary: rgba(26, 9, 0, 0.66);
--ds-color-theme-orange-light-icons-tertiary: rgba(26, 9, 0, 0.36);
--ds-color-theme-orange-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-orange-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-orange-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-orange-light-surface-backdrop: #f5bc89;
--ds-color-theme-orange-light-surface-canvas: #fdf4e6;
--ds-color-theme-orange-light-surface-decoration-primary: rgba(204, 85, 0, 0.12);
--ds-color-theme-orange-light-surface-decoration-secondary: rgba(204, 85, 0, 0.2);
--ds-color-theme-orange-light-surface-decoration-tertiary: rgba(204, 85, 0, 0.32);
--ds-color-theme-orange-light-surface-primary: #fcebd3;
--ds-color-theme-orange-light-surface-secondary: #fdf3e1;
--ds-color-theme-orange-light-surface-tertiary: #fff9f0;
--ds-color-theme-orange-light-text-primary: rgba(26, 9, 0, 0.96);
--ds-color-theme-orange-light-text-secondary: rgba(26, 9, 0, 0.6);
--ds-color-theme-orange-light-text-tertiary: rgba(26, 9, 0, 0.36);
--ds-color-theme-orange-light-tone-shade-primary: rgba(81, 27, 0, 0.06);
--ds-color-theme-orange-light-tone-tint-primary: rgba(255, 250, 244, 0.56);
--ds-color-theme-rose-dark-accent-alt-content-primary: #fffafe;
--ds-color-theme-rose-dark-accent-alt-content-secondary: rgba(255, 250, 254, 0.7);
--ds-color-theme-rose-dark-accent-alt-content-tertiary: rgba(255, 250, 254, 0.5);
--ds-color-theme-rose-dark-accent-alt-glow-primary: rgba(250, 125, 221, 0.2);
--ds-color-theme-rose-dark-accent-alt-glow-secondary: rgba(250, 125, 221, 0.12);
--ds-color-theme-rose-dark-accent-alt-primary: #c1008e;
--ds-color-theme-rose-dark-accent-alt-secondary: #a30074;
--ds-color-theme-rose-dark-accent-alt-tertiary: #84005c;
--ds-color-theme-rose-dark-accent-alt-text-primary: #ffa8ea;
--ds-color-theme-rose-dark-accent-alt-text-secondary: #fa7ddd;
--ds-color-theme-rose-dark-accent-alt-text-tertiary: #f249c5;
--ds-color-theme-rose-dark-accent-content-primary: #30031e;
--ds-color-theme-rose-dark-accent-content-secondary: rgba(48, 3, 30, 0.7);
--ds-color-theme-rose-dark-accent-content-tertiary: rgba(48, 3, 30, 0.5);
--ds-color-theme-rose-dark-accent-glow-primary: rgba(250, 125, 221, 0.2);
--ds-color-theme-rose-dark-accent-glow-secondary: rgba(250, 125, 221, 0.12);
--ds-color-theme-rose-dark-accent-primary: #fa7ddd;
--ds-color-theme-rose-dark-accent-quaternary: #d91ba0;
--ds-color-theme-rose-dark-accent-secondary: #f249c5;
--ds-color-theme-rose-dark-accent-tertiary: #e52eae;
--ds-color-theme-rose-dark-accent-text-primary: #ffa8ea;
--ds-color-theme-rose-dark-accent-text-secondary: #fa7ddd;
--ds-color-theme-rose-dark-accent-text-tertiary: #f249c5;
--ds-color-theme-rose-dark-container-border-primary: rgba(255, 250, 254, 0.09);
--ds-color-theme-rose-dark-container-border-secondary: rgba(255, 250, 254, 0.12);
--ds-color-theme-rose-dark-container-border-tertiary: rgba(255, 250, 254, 0.16);
--ds-color-theme-rose-dark-container-fill-primary: rgba(255, 250, 254, 0.03);
--ds-color-theme-rose-dark-container-fill-secondary: rgba(255, 250, 254, 0.06);
--ds-color-theme-rose-dark-container-fill-tertiary: rgba(255, 250, 254, 0.09);
--ds-color-theme-rose-dark-control-border-primary: rgba(252, 156, 230, 0.48);
--ds-color-theme-rose-dark-control-border-quaternary: rgba(252, 156, 230, 0.8);
--ds-color-theme-rose-dark-control-border-secondary: rgba(252, 156, 230, 0.64);
--ds-color-theme-rose-dark-control-border-tertiary: rgba(252, 156, 230, 0.72);
--ds-color-theme-rose-dark-control-fill-primary: rgba(252, 156, 230, 0.12);
--ds-color-theme-rose-dark-control-fill-secondary: rgba(252, 156, 230, 0.18);
--ds-color-theme-rose-dark-control-fill-tertiary: rgba(252, 156, 230, 0.24);
--ds-color-theme-rose-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-rose-dark-control-raised-fill-primary: rgba(255, 250, 254, 0.18);
--ds-color-theme-rose-dark-destructive-content-primary: #000000;
--ds-color-theme-rose-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-rose-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-rose-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-rose-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-rose-dark-destructive-primary: #ee1025;
--ds-color-theme-rose-dark-destructive-secondary: #d11527;
--ds-color-theme-rose-dark-destructive-tertiary: #aa1926;
--ds-color-theme-rose-dark-destructive-text-primary: #ee1025;
--ds-color-theme-rose-dark-destructive-text-secondary: #d11527;
--ds-color-theme-rose-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-rose-dark-highlight-primary: rgba(255, 250, 254, 0.12);
--ds-color-theme-rose-dark-icons-primary: rgba(255, 250, 254, 0.78);
--ds-color-theme-rose-dark-icons-secondary: rgba(255, 250, 254, 0.66);
--ds-color-theme-rose-dark-icons-tertiary: rgba(255, 250, 254, 0.36);
--ds-color-theme-rose-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-rose-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-rose-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-rose-dark-surface-backdrop: #2d0525;
--ds-color-theme-rose-dark-surface-canvas: #511442;
--ds-color-theme-rose-dark-surface-decoration-primary: rgba(250, 125, 221, 0.16);
--ds-color-theme-rose-dark-surface-decoration-secondary: rgba(250, 125, 221, 0.24);
--ds-color-theme-rose-dark-surface-decoration-tertiary: rgba(250, 125, 221, 0.32);
--ds-color-theme-rose-dark-surface-primary: #5b194b;
--ds-color-theme-rose-dark-surface-secondary: #692055;
--ds-color-theme-rose-dark-surface-tertiary: #72265e;
--ds-color-theme-rose-dark-text-primary: rgba(255, 250, 254, 0.96);
--ds-color-theme-rose-dark-text-secondary: rgba(255, 250, 254, 0.66);
--ds-color-theme-rose-dark-text-tertiary: rgba(255, 250, 254, 0.36);
--ds-color-theme-rose-dark-tone-shade-primary: rgba(28, 1, 18, 0.16);
--ds-color-theme-rose-dark-tone-tint-primary: rgba(255, 234, 250, 0.06);
--ds-color-theme-rose-light-accent-alt-content-primary: #660047;
--ds-color-theme-rose-light-accent-alt-content-secondary: rgba(102, 0, 71, 0.7);
--ds-color-theme-rose-light-accent-alt-content-tertiary: rgba(102, 0, 71, 0.5);
--ds-color-theme-rose-light-accent-alt-glow-primary: rgba(250, 125, 221, 0.2);
--ds-color-theme-rose-light-accent-alt-glow-secondary: rgba(250, 125, 221, 0.12);
--ds-color-theme-rose-light-accent-alt-primary: #fbb0ea;
--ds-color-theme-rose-light-accent-alt-secondary: #fa7ddd;
--ds-color-theme-rose-light-accent-alt-tertiary: #f249c5;
--ds-color-theme-rose-light-accent-alt-text-primary: #a30074;
--ds-color-theme-rose-light-accent-alt-text-secondary: #84005c;
--ds-color-theme-rose-light-accent-alt-text-tertiary: #660047;
--ds-color-theme-rose-light-accent-content-primary: #fffafe;
--ds-color-theme-rose-light-accent-content-secondary: rgba(255, 250, 254, 0.7);
--ds-color-theme-rose-light-accent-content-tertiary: rgba(255, 250, 254, 0.5);
--ds-color-theme-rose-light-accent-glow-primary: rgba(217, 0, 144, 0.2);
--ds-color-theme-rose-light-accent-glow-secondary: rgba(217, 0, 144, 0.12);
--ds-color-theme-rose-light-accent-primary: #c1008e;
--ds-color-theme-rose-light-accent-quaternary: #660047;
--ds-color-theme-rose-light-accent-secondary: #a30074;
--ds-color-theme-rose-light-accent-tertiary: #84005c;
--ds-color-theme-rose-light-accent-text-primary: #a30074;
--ds-color-theme-rose-light-accent-text-secondary: #84005c;
--ds-color-theme-rose-light-accent-text-tertiary: #660047;
--ds-color-theme-rose-light-container-border-primary: rgba(43, 8, 28, 0.06);
--ds-color-theme-rose-light-container-border-secondary: rgba(43, 8, 28, 0.09);
--ds-color-theme-rose-light-container-border-tertiary: rgba(43, 8, 28, 0.12);
--ds-color-theme-rose-light-container-fill-primary: rgba(43, 8, 28, 0.02);
--ds-color-theme-rose-light-container-fill-secondary: rgba(43, 8, 28, 0.04);
--ds-color-theme-rose-light-container-fill-tertiary: rgba(43, 8, 28, 0.06);
--ds-color-theme-rose-light-control-border-primary: rgba(163, 0, 117, 0.32);
--ds-color-theme-rose-light-control-border-quaternary: rgba(163, 0, 117, 0.72);
--ds-color-theme-rose-light-control-border-secondary: rgba(163, 0, 117, 0.56);
--ds-color-theme-rose-light-control-border-tertiary: rgba(163, 0, 117, 0.64);
--ds-color-theme-rose-light-control-fill-primary: rgba(163, 0, 117, 0.09);
--ds-color-theme-rose-light-control-fill-secondary: rgba(163, 0, 117, 0.12);
--ds-color-theme-rose-light-control-fill-tertiary: rgba(163, 0, 117, 0.18);
--ds-color-theme-rose-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-rose-light-control-raised-fill-primary: #ffffff;
--ds-color-theme-rose-light-destructive-content-primary: #ffffff;
--ds-color-theme-rose-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-rose-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-rose-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-rose-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-rose-light-destructive-primary: #ee1025;
--ds-color-theme-rose-light-destructive-secondary: #d11527;
--ds-color-theme-rose-light-destructive-tertiary: #aa1826;
--ds-color-theme-rose-light-destructive-text-primary: #ee1025;
--ds-color-theme-rose-light-destructive-text-secondary: #d11527;
--ds-color-theme-rose-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-rose-light-highlight-primary: rgba(255, 250, 254, 0.24);
--ds-color-theme-rose-light-icons-primary: rgba(48, 2, 30, 0.84);
--ds-color-theme-rose-light-icons-secondary: rgba(48, 3, 30, 0.66);
--ds-color-theme-rose-light-icons-tertiary: rgba(48, 3, 30, 0.36);
--ds-color-theme-rose-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-rose-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-rose-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-rose-light-surface-backdrop: #ee9fd9;
--ds-color-theme-rose-light-surface-canvas: #fcf3fa;
--ds-color-theme-rose-light-surface-decoration-primary: rgba(163, 0, 117, 0.12);
--ds-color-theme-rose-light-surface-decoration-secondary: rgba(163, 0, 117, 0.2);
--ds-color-theme-rose-light-surface-decoration-tertiary: rgba(163, 0, 117, 0.32);
--ds-color-theme-rose-light-surface-primary: #f6e4f1;
--ds-color-theme-rose-light-surface-secondary: #faeef8;
--ds-color-theme-rose-light-surface-tertiary: #fffafe;
--ds-color-theme-rose-light-text-primary: rgba(48, 2, 30, 0.96);
--ds-color-theme-rose-light-text-secondary: rgba(48, 3, 30, 0.6);
--ds-color-theme-rose-light-text-tertiary: rgba(48, 3, 30, 0.36);
--ds-color-theme-rose-light-tone-shade-primary: rgba(26, 5, 17, 0.06);
--ds-color-theme-rose-light-tone-tint-primary: rgba(255, 250, 254, 0.48);
--ds-color-theme-slate-blue-dark-accent-alt-content-primary: #f7fbfd;
--ds-color-theme-slate-blue-dark-accent-alt-content-secondary: rgba(247, 251, 253, 0.7);
--ds-color-theme-slate-blue-dark-accent-alt-content-tertiary: rgba(247, 251, 253, 0.5);
--ds-color-theme-slate-blue-dark-accent-alt-glow-primary: rgba(103, 174, 228, 0.2);
--ds-color-theme-slate-blue-dark-accent-alt-glow-secondary: rgba(103, 174, 228, 0.12);
--ds-color-theme-slate-blue-dark-accent-alt-primary: #2b5c82;
--ds-color-theme-slate-blue-dark-accent-alt-secondary: #1d4766;
--ds-color-theme-slate-blue-dark-accent-alt-tertiary: #143852;
--ds-color-theme-slate-blue-dark-accent-alt-text-primary: #75baef;
--ds-color-theme-slate-blue-dark-accent-alt-text-secondary: #51a9ec;
--ds-color-theme-slate-blue-dark-accent-alt-text-tertiary: #3d9fe9;
--ds-color-theme-slate-blue-dark-accent-content-primary: #060a0e;
--ds-color-theme-slate-blue-dark-accent-content-secondary: rgba(6, 10, 14, 0.7);
--ds-color-theme-slate-blue-dark-accent-content-tertiary: rgba(6, 10, 14, 0.5);
--ds-color-theme-slate-blue-dark-accent-glow-primary: rgba(103, 174, 228, 0.2);
--ds-color-theme-slate-blue-dark-accent-glow-secondary: rgba(103, 174, 228, 0.12);
--ds-color-theme-slate-blue-dark-accent-primary: #74b5e6;
--ds-color-theme-slate-blue-dark-accent-quaternary: #2380c7;
--ds-color-theme-slate-blue-dark-accent-secondary: #499ede;
--ds-color-theme-slate-blue-dark-accent-tertiary: #2f90da;
--ds-color-theme-slate-blue-dark-accent-text-primary: #87c3f1;
--ds-color-theme-slate-blue-dark-accent-text-secondary: #50a8eb;
--ds-color-theme-slate-blue-dark-accent-text-tertiary: #2b96e7;
--ds-color-theme-slate-blue-dark-container-border-primary: rgba(247, 251, 253, 0.09);
--ds-color-theme-slate-blue-dark-container-border-secondary: rgba(247, 251, 253, 0.12);
--ds-color-theme-slate-blue-dark-container-border-tertiary: rgba(247, 251, 253, 0.16);
--ds-color-theme-slate-blue-dark-container-fill-primary: rgba(247, 251, 253, 0.03);
--ds-color-theme-slate-blue-dark-container-fill-secondary: rgba(247, 251, 253, 0.06);
--ds-color-theme-slate-blue-dark-container-fill-tertiary: rgba(247, 251, 253, 0.09);
--ds-color-theme-slate-blue-dark-control-border-primary: rgba(130, 170, 201, 0.48);
--ds-color-theme-slate-blue-dark-control-border-quaternary: rgba(130, 170, 201, 0.8);
--ds-color-theme-slate-blue-dark-control-border-secondary: rgba(130, 170, 201, 0.64);
--ds-color-theme-slate-blue-dark-control-border-tertiary: rgba(130, 170, 201, 0.72);
--ds-color-theme-slate-blue-dark-control-fill-primary: rgba(129, 170, 201, 0.12);
--ds-color-theme-slate-blue-dark-control-fill-secondary: rgba(130, 170, 201, 0.18);
--ds-color-theme-slate-blue-dark-control-fill-tertiary: rgba(130, 170, 201, 0.24);
--ds-color-theme-slate-blue-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-slate-blue-dark-control-raised-fill-primary: rgba(247, 251, 253, 0.18);
--ds-color-theme-slate-blue-dark-destructive-content-primary: #000000;
--ds-color-theme-slate-blue-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-slate-blue-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-slate-blue-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-slate-blue-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-slate-blue-dark-destructive-primary: #ee1025;
--ds-color-theme-slate-blue-dark-destructive-secondary: #d11527;
--ds-color-theme-slate-blue-dark-destructive-tertiary: #aa1926;
--ds-color-theme-slate-blue-dark-destructive-text-primary: #ee1025;
--ds-color-theme-slate-blue-dark-destructive-text-secondary: #d11527;
--ds-color-theme-slate-blue-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-slate-blue-dark-highlight-primary: rgba(247, 251, 253, 0.12);
--ds-color-theme-slate-blue-dark-icons-primary: rgba(247, 251, 253, 0.78);
--ds-color-theme-slate-blue-dark-icons-secondary: rgba(247, 251, 253, 0.48);
--ds-color-theme-slate-blue-dark-icons-tertiary: rgba(247, 251, 253, 0.24);
--ds-color-theme-slate-blue-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-slate-blue-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-slate-blue-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-slate-blue-dark-surface-backdrop: #0c151c;
--ds-color-theme-slate-blue-dark-surface-canvas: #1e3042;
--ds-color-theme-slate-blue-dark-surface-decoration-primary: rgba(103, 174, 228, 0.16);
--ds-color-theme-slate-blue-dark-surface-decoration-secondary: rgba(103, 174, 228, 0.24);
--ds-color-theme-slate-blue-dark-surface-decoration-tertiary: rgba(103, 174, 228, 0.32);
--ds-color-theme-slate-blue-dark-surface-primary: #1e3347;
--ds-color-theme-slate-blue-dark-surface-secondary: #2b4259;
--ds-color-theme-slate-blue-dark-surface-tertiary: #324a61;
--ds-color-theme-slate-blue-dark-text-primary: rgba(247, 251, 253, 0.96);
--ds-color-theme-slate-blue-dark-text-secondary: rgba(247, 251, 253, 0.66);
--ds-color-theme-slate-blue-dark-text-tertiary: rgba(247, 251, 253, 0.36);
--ds-color-theme-slate-blue-dark-tone-shade-primary: rgba(6, 10, 14, 0.12);
--ds-color-theme-slate-blue-dark-tone-tint-primary: rgba(230, 242, 248, 0.06);
--ds-color-theme-slate-blue-light-accent-alt-content-primary: #143852;
--ds-color-theme-slate-blue-light-accent-alt-content-secondary: rgba(20, 56, 82, 0.7);
--ds-color-theme-slate-blue-light-accent-alt-content-tertiary: rgba(20, 56, 82, 0.5);
--ds-color-theme-slate-blue-light-accent-alt-glow-primary: rgba(117, 187, 240, 0.2);
--ds-color-theme-slate-blue-light-accent-alt-glow-secondary: rgba(117, 187, 240, 0.12);
--ds-color-theme-slate-blue-light-accent-alt-primary: #94cdf9;
--ds-color-theme-slate-blue-light-accent-alt-secondary: #75baef;
--ds-color-theme-slate-blue-light-accent-alt-tertiary: #499ede;
--ds-color-theme-slate-blue-light-accent-alt-text-primary: #2b5c82;
--ds-color-theme-slate-blue-light-accent-alt-text-secondary: #1d4766;
--ds-color-theme-slate-blue-light-accent-alt-text-tertiary: #143852;
--ds-color-theme-slate-blue-light-accent-content-primary: #f0f8ff;
--ds-color-theme-slate-blue-light-accent-content-secondary: rgba(240, 248, 255, 0.7);
--ds-color-theme-slate-blue-light-accent-content-tertiary: rgba(240, 248, 255, 0.5);
--ds-color-theme-slate-blue-light-accent-glow-primary: rgba(58, 114, 156, 0.2);
--ds-color-theme-slate-blue-light-accent-glow-secondary: rgba(58, 114, 156, 0.12);
--ds-color-theme-slate-blue-light-accent-primary: #39719c;
--ds-color-theme-slate-blue-light-accent-quaternary: #143851;
--ds-color-theme-slate-blue-light-accent-secondary: #2b5c82;
--ds-color-theme-slate-blue-light-accent-tertiary: #1d4766;
--ds-color-theme-slate-blue-light-accent-text-primary: #2b5c82;
--ds-color-theme-slate-blue-light-accent-text-secondary: #1d4766;
--ds-color-theme-slate-blue-light-accent-text-tertiary: #143852;
--ds-color-theme-slate-blue-light-container-border-primary: rgba(6, 15, 24, 0.06);
--ds-color-theme-slate-blue-light-container-border-secondary: rgba(6, 15, 24, 0.09);
--ds-color-theme-slate-blue-light-container-border-tertiary: rgba(6, 15, 24, 0.12);
--ds-color-theme-slate-blue-light-container-fill-primary: rgba(6, 15, 24, 0.01);
--ds-color-theme-slate-blue-light-container-fill-secondary: rgba(6, 15, 24, 0.03);
--ds-color-theme-slate-blue-light-container-fill-tertiary: rgba(6, 15, 24, 0.06);
--ds-color-theme-slate-blue-light-control-border-primary: rgba(33, 88, 131, 0.32);
--ds-color-theme-slate-blue-light-control-border-quaternary: rgba(33, 88, 131, 0.72);
--ds-color-theme-slate-blue-light-control-border-secondary: rgba(33, 88, 131, 0.56);
--ds-color-theme-slate-blue-light-control-border-tertiary: rgba(33, 88, 131, 0.64);
--ds-color-theme-slate-blue-light-control-fill-primary: rgba(33, 88, 131, 0.09);
--ds-color-theme-slate-blue-light-control-fill-secondary: rgba(33, 88, 131, 0.12);
--ds-color-theme-slate-blue-light-control-fill-tertiary: rgba(33, 88, 131, 0.18);
--ds-color-theme-slate-blue-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-slate-blue-light-control-raised-fill-primary: #eef7fc;
--ds-color-theme-slate-blue-light-destructive-content-primary: #ffffff;
--ds-color-theme-slate-blue-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-slate-blue-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-slate-blue-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-slate-blue-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-slate-blue-light-destructive-primary: #ee1025;
--ds-color-theme-slate-blue-light-destructive-secondary: #d11527;
--ds-color-theme-slate-blue-light-destructive-tertiary: #aa1826;
--ds-color-theme-slate-blue-light-destructive-text-primary: #ee1025;
--ds-color-theme-slate-blue-light-destructive-text-secondary: #d11527;
--ds-color-theme-slate-blue-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-slate-blue-light-highlight-primary: rgba(247, 251, 253, 0.24);
--ds-color-theme-slate-blue-light-icons-primary: rgba(6, 10, 14, 0.84);
--ds-color-theme-slate-blue-light-icons-secondary: rgba(6, 10, 14, 0.6);
--ds-color-theme-slate-blue-light-icons-tertiary: rgba(6, 10, 14, 0.36);
--ds-color-theme-slate-blue-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-slate-blue-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-slate-blue-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-slate-blue-light-surface-backdrop: #8aa5c0;
--ds-color-theme-slate-blue-light-surface-canvas: #dceaf3;
--ds-color-theme-slate-blue-light-surface-decoration-primary: rgba(33, 88, 131, 0.09);
--ds-color-theme-slate-blue-light-surface-decoration-secondary: rgba(33, 88, 131, 0.2);
--ds-color-theme-slate-blue-light-surface-decoration-tertiary: rgba(33, 88, 131, 0.32);
--ds-color-theme-slate-blue-light-surface-primary: #d2e5f3;
--ds-color-theme-slate-blue-light-surface-secondary: #ddedf7;
--ds-color-theme-slate-blue-light-surface-tertiary: #eef6fb;
--ds-color-theme-slate-blue-light-text-primary: rgba(6, 10, 14, 0.96);
--ds-color-theme-slate-blue-light-text-secondary: rgba(6, 10, 14, 0.6);
--ds-color-theme-slate-blue-light-text-tertiary: rgba(6, 10, 14, 0.36);
--ds-color-theme-slate-blue-light-tone-shade-primary: rgba(20, 51, 81, 0.06);
--ds-color-theme-slate-blue-light-tone-tint-primary: rgba(247, 251, 253, 0.4);
--ds-color-theme-violet-dark-accent-alt-content-primary: #f5f5fe;
--ds-color-theme-violet-dark-accent-alt-content-secondary: rgba(245, 245, 254, 0.7);
--ds-color-theme-violet-dark-accent-alt-content-tertiary: rgba(245, 245, 254, 0.5);
--ds-color-theme-violet-dark-accent-alt-glow-primary: rgba(162, 128, 255, 0.2);
--ds-color-theme-violet-dark-accent-alt-glow-secondary: rgba(162, 128, 255, 0.12);
--ds-color-theme-violet-dark-accent-alt-primary: #5c17e5;
--ds-color-theme-violet-dark-accent-alt-secondary: #470fbf;
--ds-color-theme-violet-dark-accent-alt-tertiary: #3b0da6;
--ds-color-theme-violet-dark-accent-alt-text-primary: #c6b2ff;
--ds-color-theme-violet-dark-accent-alt-text-secondary: #a17fff;
--ds-color-theme-violet-dark-accent-alt-text-tertiary: #8f69fb;
--ds-color-theme-violet-dark-accent-content-primary: #030109;
--ds-color-theme-violet-dark-accent-content-secondary: rgba(3, 1, 9, 0.7);
--ds-color-theme-violet-dark-accent-content-tertiary: rgba(3, 1, 9, 0.5);
--ds-color-theme-violet-dark-accent-glow-primary: rgba(162, 128, 255, 0.2);
--ds-color-theme-violet-dark-accent-glow-secondary: rgba(162, 128, 255, 0.2);
--ds-color-theme-violet-dark-accent-primary: #a17fff;
--ds-color-theme-violet-dark-accent-quaternary: #6e29ee;
--ds-color-theme-violet-dark-accent-secondary: #8f69fb;
--ds-color-theme-violet-dark-accent-tertiary: #7f55f6;
--ds-color-theme-violet-dark-accent-text-primary: #c6b2ff;
--ds-color-theme-violet-dark-accent-text-secondary: #a17fff;
--ds-color-theme-violet-dark-accent-text-tertiary: #8f69fb;
--ds-color-theme-violet-dark-container-border-primary: rgba(245, 245, 254, 0.09);
--ds-color-theme-violet-dark-container-border-secondary: rgba(245, 245, 254, 0.12);
--ds-color-theme-violet-dark-container-border-tertiary: rgba(245, 245, 254, 0.16);
--ds-color-theme-violet-dark-container-fill-primary: rgba(245, 245, 254, 0.03);
--ds-color-theme-violet-dark-container-fill-secondary: rgba(245, 245, 254, 0.06);
--ds-color-theme-violet-dark-container-fill-tertiary: rgba(245, 245, 254, 0.09);
--ds-color-theme-violet-dark-control-border-primary: rgba(192, 165, 253, 0.48);
--ds-color-theme-violet-dark-control-border-quaternary: rgba(192, 165, 253, 0.8);
--ds-color-theme-violet-dark-control-border-secondary: rgba(192, 165, 253, 0.64);
--ds-color-theme-violet-dark-control-border-tertiary: rgba(192, 165, 253, 0.72);
--ds-color-theme-violet-dark-control-fill-primary: rgba(191, 165, 252, 0.12);
--ds-color-theme-violet-dark-control-fill-secondary: rgba(192, 165, 253, 0.18);
--ds-color-theme-violet-dark-control-fill-tertiary: rgba(192, 165, 253, 0.24);
--ds-color-theme-violet-dark-control-raised-backdrop: rgba(255, 255, 255, 0.12);
--ds-color-theme-violet-dark-control-raised-fill-primary: rgba(243, 242, 250, 0.18);
--ds-color-theme-violet-dark-destructive-content-primary: #000000;
--ds-color-theme-violet-dark-destructive-content-secondary: rgba(0, 0, 0, 0.9);
--ds-color-theme-violet-dark-destructive-content-tertiary: rgba(0, 0, 0, 0.6);
--ds-color-theme-violet-dark-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-violet-dark-destructive-glow-secondary: rgba(238, 16, 37, 0.12);
--ds-color-theme-violet-dark-destructive-primary: #ee1025;
--ds-color-theme-violet-dark-destructive-secondary: #d11527;
--ds-color-theme-violet-dark-destructive-tertiary: #aa1926;
--ds-color-theme-violet-dark-destructive-text-primary: #ee1025;
--ds-color-theme-violet-dark-destructive-text-secondary: #d11527;
--ds-color-theme-violet-dark-destructive-text-tertiary: #aa1926;
--ds-color-theme-violet-dark-highlight-primary: rgba(243, 242, 250, 0.12);
--ds-color-theme-violet-dark-icons-primary: rgba(239, 239, 255, 0.78);
--ds-color-theme-violet-dark-icons-secondary: rgba(245, 245, 254, 0.48);
--ds-color-theme-violet-dark-icons-tertiary: rgba(245, 245, 254, 0.24);
--ds-color-theme-violet-dark-shadow-primary: rgba(0, 0, 0, 0.16);
--ds-color-theme-violet-dark-shadow-secondary: rgba(0, 0, 0, 0.24);
--ds-color-theme-violet-dark-shadow-tertiary: rgba(0, 0, 0, 0.32);
--ds-color-theme-violet-dark-surface-backdrop: #120b27;
--ds-color-theme-violet-dark-surface-canvas: #271c49;
--ds-color-theme-violet-dark-surface-decoration-primary: rgba(192, 165, 253, 0.16);
--ds-color-theme-violet-dark-surface-decoration-secondary: rgba(192, 165, 253, 0.24);
--ds-color-theme-violet-dark-surface-decoration-tertiary: rgba(192, 165, 253, 0.32);
--ds-color-theme-violet-dark-surface-primary: #2e2158;
--ds-color-theme-violet-dark-surface-secondary: #3a2a63;
--ds-color-theme-violet-dark-surface-tertiary: #433270;
--ds-color-theme-violet-dark-text-primary: rgba(239, 239, 255, 0.96);
--ds-color-theme-violet-dark-text-secondary: rgba(245, 245, 254, 0.66);
--ds-color-theme-violet-dark-text-tertiary: rgba(245, 245, 254, 0.36);
--ds-color-theme-violet-dark-tone-shade-primary: rgba(12, 9, 21, 0.16);
--ds-color-theme-violet-dark-tone-tint-primary: rgba(233, 231, 248, 0.06);
--ds-color-theme-violet-light-accent-alt-content-primary: #2b097a;
--ds-color-theme-violet-light-accent-alt-content-secondary: rgba(44, 10, 123, 0.7);
--ds-color-theme-violet-light-accent-alt-content-tertiary: rgba(44, 10, 123, 0.5);
--ds-color-theme-violet-light-accent-alt-glow-primary: rgba(162, 128, 255, 0.2);
--ds-color-theme-violet-light-accent-alt-glow-secondary: rgba(162, 128, 255, 0.12);
--ds-color-theme-violet-light-accent-alt-primary: #c6b2ff;
--ds-color-theme-violet-light-accent-alt-secondary: #a17fff;
--ds-color-theme-violet-light-accent-alt-tertiary: #8f69fb;
--ds-color-theme-violet-light-accent-alt-text-primary: #470fbf;
--ds-color-theme-violet-light-accent-alt-text-secondary: #3b0da6;
--ds-color-theme-violet-light-accent-alt-text-tertiary: #2b097a;
--ds-color-theme-violet-light-accent-content-primary: #f5f5fe;
--ds-color-theme-violet-light-accent-content-secondary: rgba(245, 245, 254, 0.7);
--ds-color-theme-violet-light-accent-content-tertiary: rgba(245, 245, 254, 0.5);
--ds-color-theme-violet-light-accent-glow-primary: rgba(92, 23, 229, 0.2);
--ds-color-theme-violet-light-accent-glow-secondary: rgba(92, 23, 229, 0.12);
--ds-color-theme-violet-light-accent-primary: #5c17e5;
--ds-color-theme-violet-light-accent-quaternary: #2b097a;
--ds-color-theme-violet-light-accent-secondary: #470fbf;
--ds-color-theme-violet-light-accent-tertiary: #3b0da6;
--ds-color-theme-violet-light-accent-text-primary: #470fbf;
--ds-color-theme-violet-light-accent-text-secondary: #3b0da6;
--ds-color-theme-violet-light-accent-text-tertiary: #2b097a;
--ds-color-theme-violet-light-container-border-primary: rgba(7, 5, 13, 0.06);
--ds-color-theme-violet-light-container-border-secondary: rgba(7, 5, 13, 0.09);
--ds-color-theme-violet-light-container-border-tertiary: rgba(7, 5, 13, 0.12);
--ds-color-theme-violet-light-container-fill-primary: rgba(7, 5, 13, 0.01);
--ds-color-theme-violet-light-container-fill-secondary: rgba(7, 5, 13, 0.03);
--ds-color-theme-violet-light-container-fill-tertiary: rgba(7, 5, 13, 0.06);
--ds-color-theme-violet-light-control-border-primary: rgba(87, 11, 218, 0.32);
--ds-color-theme-violet-light-control-border-quaternary: rgba(87, 11, 218, 0.72);
--ds-color-theme-violet-light-control-border-secondary: rgba(87, 11, 218, 0.56);
--ds-color-theme-violet-light-control-border-tertiary: rgba(87, 11, 218, 0.64);
--ds-color-theme-violet-light-control-fill-primary: rgba(87, 11, 218, 0.09);
--ds-color-theme-violet-light-control-fill-secondary: rgba(87, 11, 218, 0.12);
--ds-color-theme-violet-light-control-fill-tertiary: rgba(87, 11, 218, 0.18);
--ds-color-theme-violet-light-control-raised-backdrop: rgba(0, 0, 0, 0.09);
--ds-color-theme-violet-light-control-raised-fill-primary: #f6f6fc;
--ds-color-theme-violet-light-destructive-content-primary: #ffffff;
--ds-color-theme-violet-light-destructive-content-secondary: rgba(255, 255, 255, 0.9);
--ds-color-theme-violet-light-destructive-content-tertiary: rgba(255, 255, 255, 0.6);
--ds-color-theme-violet-light-destructive-glow-primary: rgba(238, 16, 37, 0.2);
--ds-color-theme-violet-light-destructive-glow-secondary: rgba(238, 16, 37, 0.2);
--ds-color-theme-violet-light-destructive-primary: #ee1025;
--ds-color-theme-violet-light-destructive-secondary: #d11527;
--ds-color-theme-violet-light-destructive-tertiary: #aa1826;
--ds-color-theme-violet-light-destructive-text-primary: #ee1025;
--ds-color-theme-violet-light-destructive-text-secondary: #d11527;
--ds-color-theme-violet-light-destructive-text-tertiary: #aa1926;
--ds-color-theme-violet-light-highlight-primary: rgba(245, 245, 254, 0.24);
--ds-color-theme-violet-light-icons-primary: rgba(7, 5, 13, 0.84);
--ds-color-theme-violet-light-icons-secondary: rgba(7, 5, 13, 0.6);
--ds-color-theme-violet-light-icons-tertiary: rgba(7, 5, 13, 0.36);
--ds-color-theme-violet-light-shadow-primary: rgba(0, 0, 0, 0.05);
--ds-color-theme-violet-light-shadow-secondary: rgba(0, 0, 0, 0.08);
--ds-color-theme-violet-light-shadow-tertiary: rgba(0, 0, 0, 0.16);
--ds-color-theme-violet-light-surface-backdrop: #c0b9e3;
--ds-color-theme-violet-light-surface-canvas: #edecf9;
--ds-color-theme-violet-light-surface-decoration-primary: rgba(87, 11, 218, 0.09);
--ds-color-theme-violet-light-surface-decoration-secondary: rgba(87, 11, 218, 0.2);
--ds-color-theme-violet-light-surface-decoration-tertiary: rgba(87, 11, 218, 0.32);
--ds-color-theme-violet-light-surface-primary: #e7e4f5;
--ds-color-theme-violet-light-surface-secondary: #edebf8;
--ds-color-theme-violet-light-surface-tertiary: #f6f6fc;
--ds-color-theme-violet-light-text-primary: rgba(7, 5, 13, 0.96);
--ds-color-theme-violet-light-text-secondary: rgba(7, 5, 13, 0.6);
--ds-color-theme-violet-light-text-tertiary: rgba(7, 5, 13, 0.36);
--ds-color-theme-violet-light-tone-shade-primary: rgba(35, 20, 81, 0.06);
--ds-color-theme-violet-light-tone-tint-primary: rgba(245, 245, 254, 0.56);
}
/* shared/styles/design-tokens.css */
/* pages/onboarding/app/shared/styles/variables.css */
:root {
--base: 16px;
font-size: calc(16px / var(--base));
--px-in-rem: calc(1rem / 16);
--sp-256: 64rem;
--sp-192: 48rem;
--sp-96: 24rem;
--sp-80: 20rem;
--sp-72: 18rem;
--sp-64: 16rem;
--sp-56: 14rem;
--sp-48: 12rem;
--sp-40: 10rem;
--sp-35: 8.75rem;
--sp-32: 8rem;
--sp-30: 7.5rem;
--sp-25: 6.25rem;
--sp-24: 6rem;
--sp-20: 5rem;
--sp-16: 4rem;
--sp-15: 3.75rem;
--sp-14: 3.5rem;
--sp-13: 3.25rem;
--sp-12: 3rem;
--sp-11: 2.75rem;
--sp-10: 2.5rem;
--sp-9: 2.25rem;
--sp-8: 2rem;
--sp-7: 1.75rem;
--sp-6: 1.5rem;
--sp-5: 1.25rem;
--sp-4: 1rem;
--sp-3: 0.75rem;
--sp-2: 0.5rem;
--sp-1: 0.25rem;
--ddg-color-primary: #3969ef;
--ddg-color-primary-tint-12: rgba(57, 105, 239, 0.12);
--ddg-color-primary-dark: #7295F6;
--ddg-color-primary-dark-tint-15: rgba(114, 149, 246, 0.15);
--color-blue-60: #2b55ca;
--color-blue-20: #8fabf9;
--color-blue-0: #ccdaff;
--color-black-at-1: rgba(0, 0, 0, 0.01);
--color-black-at-3: rgba(0, 0, 0, 0.03);
--color-black-at-6: rgba(0, 0, 0, 0.06);
--color-black-at-9: rgba(0, 0, 0, 0.09);
--color-black-at-12: rgba(0, 0, 0, 0.12);
--color-black-at-15: rgba(0, 0, 0, 0.15);
--color-black-at-18: rgba(0, 0, 0, 0.18);
--color-black-at-36: rgba(0, 0, 0, 0.36);
--color-black-at-40: rgba(0, 0, 0, 0.4);
--color-black-at-42: rgba(0, 0, 0, 0.42);
--color-black-at-48: rgba(0, 0, 0, 0.48);
--color-black-at-50: rgba(0, 0, 0, 0.5);
--color-black-at-60: rgba(0, 0, 0, 0.6);
--color-black-at-72: rgba(0, 0, 0, 0.72);
--color-black-at-80: rgba(0, 0, 0, 0.8);
--color-black-at-84: rgba(0, 0, 0, 0.84);
--color-black-at-90: rgba(0, 0, 0, 0.9);
--color-black-at-96: rgba(0, 0, 0, 0.96);
--color-gray85-at-80: rgba(51, 51, 51, 0.8);
--color-gray-82: #3d3d3d;
--color-white-at-3: rgba(255, 255, 255, 0.03);
--color-white-at-6: rgba(255, 255, 255, 0.06);
--color-white-at-9: rgba(255, 255, 255, 0.09);
--color-white-at-12: rgba(255, 255, 255, 0.12);
--color-white-at-15: rgba(255, 255, 255, 0.15);
--color-white-at-18: rgba(255, 255, 255, 0.18);
--color-white-at-24: rgba(255, 255, 255, 0.24);
--color-white-at-30: rgba(255, 255, 255, 0.3);
--color-white-at-36: rgba(255, 255, 255, 0.36);
--color-white-at-42: rgba(255, 255, 255, 0.42);
--color-white-at-50: rgba(255, 255, 255, 0.5);
--color-white-at-60: rgba(255, 255, 255, 0.6);
--color-white-at-70: rgba(255, 255, 255, 0.7);
--color-white-at-80: rgba(255, 255, 255, 0.8);
--color-white-at-84: rgba(255, 255, 255, 0.84);
--color-white-at-96: rgba(255, 255, 255, 0.96);
--anim-delay: 300ms;
--anim-delay-double: 600ms;
--theme-ddg-color-primary: var(--ddg-color-primary);
--theme-txt-link-color: var(--ddg-color-primary);
--theme-txt-color: var(--color-black-at-84);
--theme-txt-color-title: var(--color-black-at-84);
--theme-txt-color-progress: var(--color-black-at-60);
}
@media (prefers-color-scheme: dark) {
:root {
--theme-ddg-color-primary: var(--ddg-color-primary-dark);
--theme-txt-link-color: var(--ddg-color-primary-dark);
--theme-txt-color: var(--color-white-at-84);
--theme-txt-color-title: var(--color-white-at-84);
--theme-txt-color-progress: var(--color-white-at-50);
}
}
/* pages/onboarding/app/shared/styles/base.css */
*,
*:after,
*:before {
box-sizing: border-box;
}
html[data-reduced-motion=true] * {
animation: none !important;
transition: none !important;
}
body {
font-family: system-ui;
font-size: 15px;
line-height: 20px;
letter-spacing: -0.08px;
margin: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
user-select: none;
-webkit-user-select: none;
cursor: default;
color: var(--theme-txt-color);
}
body > main {
width: 100%;
}
h1,
h2,
h3,
h4 {
margin: 0;
}
@media only screen and (min-width: 481px) {
body {
font-size: 13px;
line-height: 16px;
}
}
a {
color: var(--theme-txt-link-color);
}
button {
font-family: system-ui, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
padding: 0;
}
h2 {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
text-align: center;
}
@media only screen and (min-width: 481px) {
h2 {
text-align: unset;
font-size: 13px;
line-height: 18px;
}
}
/* pages/onboarding/app/shared/styles/global.css */
/* pages/onboarding/app/shared/components/Stack.module.css */
.Stack_stack {
display: flex;
flex-direction: column;
gap: var(--sp-8);
width: 100%;
}
.Stack_stack[data-debug=true] > * {
outline: 1px dotted black;
}
/* pages/onboarding/app/shared/components/Content.module.css */
.Content_wrapper {
display: flex;
align-items: stretch;
flex-direction: column;
flex-grow: 1;
width: 100%;
}
@media only screen and (min-width: 481px) {
.Content_wrapper {
display: flex;
align-items: start;
flex-direction: column;
}
}
.Content_indent {
max-width: 400px;
}
@media only screen and (min-width: 481px) {
.Content_indent {
margin-left: 80px;
max-width: 480px;
}
}
/* pages/onboarding/app/v3/components/Background.module.css */
.Background_background {
position: fixed;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #FDEDE5;
background-image: url("./grain-JTV7KOOJ.png"), url("./background-v3-5FMPN72D.jpg");
background-blend-mode: overlay, normal;
background-repeat: repeat, no-repeat;
background-size: 50px, cover;
}
@media only screen and (min-width: 481px) {
.Background_background {
background-size: 100px, 200% 100%;
}
}
@media only screen and (min-width: 801px) {
.Background_background {
background-size: 100px, 100% 100%;
}
}
@media (prefers-color-scheme: dark) {
.Background_background {
background-color: #37214F;
background-image: url("./grain-dark-UGS45YOQ.png"), url("./background-dark-v3-54EOBOK7.jpg");
background-blend-mode: overlay, normal;
background-repeat: repeat, no-repeat;
background-size: 50px, cover;
}
}
.Background_foreground {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
.Background_animated {
animation-duration: 30s;
animation-fill-mode: both;
animation-timing-function: linear;
}
.Background_clouds {
background-image: url("./clouds-PIPF2DEZ.svg");
background-position: top right;
animation-name: Background_offscreen-clouds;
animation-duration: 50s;
}
@media (prefers-color-scheme: dark) {
.Background_clouds {
opacity: .1;
}
}
.Background_mountains {
background-image: url("./mountains-OPQE4D4Y.svg");
background-position: bottom right;
}
@media (prefers-color-scheme: dark) {
.Background_mountains {
opacity: .15;
}
}
.Background_stars {
background-image: url("./stars-W24DLZLU.svg");
background-position: top right;
display: none;
}
@media screen and (prefers-color-scheme: dark) {
.Background_stars {
display: block;
}
}
@media only screen and (max-width: 480px) {
.Background_foreground {
display: none;
}
}
@keyframes Background_offscreen {
from {
transform: translateX(100vw);
}
to {
transform: translateX(0vw);
}
}
@keyframes Background_offscreen-clouds {
from {
transform: translateX(830px);
}
to {
transform: translateX(0vw);
}
}
/* pages/onboarding/app/shared/components/Icons.module.css */
.Icons_bounceIn {
animation-name: Icons_bouncein;
animation-duration: 500ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.Icons_bounceIn[data-delay=normal] {
animation-delay: var(--anim-delay);
}
.Icons_bounceIn[data-delay=double] {
animation-delay: var(--anim-delay-double);
}
@keyframes Icons_bouncein {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.Icons_slideIn {
animation-name: Icons_slidein;
animation-duration: 300ms;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
}
.Icons_slideIn[data-delay=normal] {
animation-delay: var(--anim-delay);
}
.Icons_slideIn[data-delay=double] {
animation-delay: var(--anim-delay-double);
}
@keyframes Icons_slidein {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
.Icons_slideUp {
animation-name: Icons_slideup;
animation-duration: 300ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes Icons_slideup {
from {
transform: translateY(40px);
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
.Icons_fadeIn {
opacity: 0;
visibility: hidden;
animation-name: Icons_fadeIn;
animation-fill-mode: forwards;
animation-duration: 300ms;
}
[data-reduced-motion=true] .Icons_fadeIn {
opacity: 1;
visibility: visible;
}
@keyframes Icons_fadeIn {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
/* pages/onboarding/app/v3/components/ComparisonTable.module.css */
.ComparisonTable_table2 {
border-spacing: 0;
padding: 0 var(--sp-14);
width: 100%;
}
.ComparisonTable_rowHeading2 {
font-size: calc(15 * var(--px-in-rem));
font-weight: 500;
line-height: normal;
padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
}
.ComparisonTable_rowCell2 {
text-align: center;
}
.ComparisonTable_row:not(:last-child) .ComparisonTable_rowHeading2,
.ComparisonTable_row:not(:last-child) .ComparisonTable_rowCell2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
@media (prefers-color-scheme: dark) {
.ComparisonTable_row:not(:last-child) .ComparisonTable_rowHeading2,
.ComparisonTable_row:not(:last-child) .ComparisonTable_rowCell2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
}
.ComparisonTable_rowHeadingContents {
align-items: center;
display: flex;
gap: var(--sp-4);
text-align: left;
}
.ComparisonTable_rowIcon {
height: var(--sp-6);
width: var(--sp-6);
}
.ComparisonTable_status {
display: inline-block;
height: var(--sp-5);
width: var(--sp-5);
}
.ComparisonTable_notSupported {
background-image: url("./cross-24-LC5CE255.svg");
}
.ComparisonTable_partialSupport {
background-image: url("./stop-24-RHIE2TQT.svg");
}
.ComparisonTable_fullSupport {
background-image: url("./check-24-TKI2L77Y.svg");
}
.ComparisonTable_browserIcon {
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
border-radius: var(--sp-2);
box-shadow: 0px 1.25px 3.75px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.08);
display: inline-block;
margin: 0 var(--sp-3);
height: var(--sp-10);
width: var(--sp-10);
}
.ComparisonTable_browserIconChrome {
background-image: url("./chrome-CN5U36NT.svg");
}
.ComparisonTable_browserIconSafari {
background-image: url("./safari-HDKLSKMI.svg");
}
.ComparisonTable_browserIconDuckDuckGo {
background-color: #de5833;
background-image: url("./ddg-VAGQ4AK4.svg");
}
/* pages/onboarding/app/v3/components/Animation.module.css */
.Animation_container {
position: relative;
clip-path: polygon(-100% -100%, calc(100% + var(--sp-6)) -100%, calc(100% + var(--sp-6)) 200%, -100% 200%);
}
.Animation_container[data-animation-state=done] {
clip-path: none;
}
.Animation_slideIn {
animation-name: Animation_slide;
animation-duration: 600ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
transform: translateX(100vw);
animation-play-state: paused;
}
.Animation_slideIn[data-delay=normal] {
animation-delay: var(--anim-delay);
}
.Animation_slideIn[data-delay=double] {
animation-delay: var(--anim-delay-double);
}
[data-reduced-motion=true] .Animation_slideIn {
transform: none;
}
[data-animation-state=animating] .Animation_slideIn {
animation-play-state: running;
}
@keyframes Animation_slide {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(0);
}
}
/* pages/onboarding/app/v3/components/DuckPlayerStep.module.css */
.DuckPlayerStep_animationContainer {
display: flex;
height: 208px;
justify-content: center;
width: 100%;
}
.DuckPlayerStep_animationContainer canvas {
border: 1px solid rgba(0, 0, 0, 0.06);
}
/* pages/onboarding/app/shared/components/ToggleButton.module.css */
.ToggleButton_button {
--btn-bg: var(--toggle-bg-light, #ffffff);
--btn-border: var(--toggle-border-light, var(--color-black-at-6));
--btn-color: var(--toggle-color-light, var(--color-black-at-84));
--btn-selected-bg: var(--toggle-accent-bg-light, var(--ddg-color-primary-tint-12));
--btn-selected-border: var(--toggle-accent-light, var(--ddg-color-primary));
--btn-selected-color: var(--toggle-accent-text-light, var(--toggle-accent-light, var(--ddg-color-primary)));
align-items: center;
display: flex;
flex: 1;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
background-color: var(--btn-bg);
border: 1px solid var(--btn-border);
border-radius: var(--sp-3);
color: var(--btn-color);
cursor: pointer;
font-size: inherit;
font-weight: 400;
}
@media (prefers-color-scheme: dark) {
.ToggleButton_button {
--btn-bg: var(--toggle-bg-dark, var(--color-gray-82));
--btn-border: var(--toggle-border-dark, var(--color-white-at-15));
--btn-color: var(--toggle-color-dark, var(--color-white-at-84));
--btn-selected-bg: var(--toggle-accent-bg-dark, var(--color-blue-60));
--btn-selected-border: var(--toggle-accent-dark, var(--color-blue-0));
--btn-selected-color: var(--toggle-accent-text-dark, var(--toggle-accent-dark, var(--color-blue-0)));
}
}
.ToggleButton_button.ToggleButton_selected {
background-color: var(--btn-selected-bg);
border-color: var(--btn-selected-border);
color: var(--btn-selected-color);
}
.ToggleButton_buttonText {
flex: 1;
text-align: left;
}
.ToggleButton_radioButton {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ToggleButton_radioCircle {
--radio-circle: var(--toggle-radio-light, #3969ef);
fill: var(--radio-circle);
}
@media (prefers-color-scheme: dark) {
.ToggleButton_radioCircle {
--radio-circle: var(--toggle-radio-dark, #8fabf9);
}
}
.ToggleButton_radioCheckmark {
--radio-checkmark: var(--toggle-radio-check-light, #ffffff);
fill: var(--radio-checkmark);
}
@media (prefers-color-scheme: dark) {
.ToggleButton_radioCheckmark {
--radio-checkmark: var(--toggle-radio-check-dark, #051133);
}
}
.ToggleButton_radioCircleUnselected {
--radio-unselected: rgba(0, 0, 0, 0.36);
stroke: var(--radio-unselected);
fill: none;
}
@media (prefers-color-scheme: dark) {
.ToggleButton_radioCircleUnselected {
--radio-unselected: rgba(255, 255, 255, 0.24);
}
}
/* pages/onboarding/app/v3/pages/AddressBarMode/AddressBarPreview.module.css */
.AddressBarPreview_wrapper {
position: relative;
width: 100%;
}
.AddressBarPreview_image {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.AddressBarPreview_wrapper {
--address-bar-left: 20.83%;
--address-bar-top: 23.56%;
--address-bar-width: 58.33%;
--address-bar-height: 23.08%;
--address-bar-height-reduced: 13.85%;
--address-bar-transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.AddressBarPreview_bgOverlay {
position: absolute;
z-index: 1;
left: var(--address-bar-left);
top: var(--address-bar-top);
width: var(--address-bar-width);
height: var(--address-bar-height);
background-color: #fff;
border-radius: 8px;
pointer-events: none;
transition: var(--address-bar-transition), background-color 300ms ease;
}
.AddressBarPreview_bgReduced {
height: var(--address-bar-height-reduced);
}
.AddressBarPreview_borderOverlay {
position: absolute;
z-index: 2;
left: var(--address-bar-left);
top: var(--address-bar-top);
width: var(--address-bar-width);
height: var(--address-bar-height);
border: 2px solid;
border-radius: 8px;
pointer-events: none;
box-sizing: border-box;
transition: var(--address-bar-transition);
}
.AddressBarPreview_borderReduced {
height: var(--address-bar-height-reduced);
}
.AddressBarPreview_regularIcon {
position: absolute;
z-index: 3;
right: 23%;
top: 27%;
width: 2.78%;
height: auto;
pointer-events: none;
}
.AddressBarPreview_extendedIcon {
position: absolute;
z-index: 3;
right: 21.9%;
top: 26.5%;
width: 12.96%;
height: auto;
pointer-events: none;
}
/* pages/onboarding/app/v3/pages/AddressBarMode/AddressBarMode.module.css */
.AddressBarMode_container {
align-items: center;
font-size: calc(13 * var(--px-in-rem));
gap: 0;
}
.AddressBarMode_body {
align-items: center;
max-width: 432px;
gap: calc(10 * var(--px-in-rem));
margin-bottom: var(--sp-10);
}
.AddressBarMode_buttons {
display: flex;
width: 100%;
gap: var(--sp-2);
}
.AddressBarMode_footer {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-7);
}
.AddressBarMode_starIcon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.AddressBarMode_footerText {
color: var(--theme-txt-color-progress);
}
.AddressBarMode_footerText :where(b) {
font-weight: 600;
}
/* pages/onboarding/app/v3/components/ElasticButton.module.css */
.ElasticButton_button {
--btn-line-height: 1;
--btn-font-size: calc(14 * var(--px-in-rem));
--btn-height: var(--sp-9);
--scale-size: var(--sp-2);
background: none;
border: none;
outline: none;
box-sizing: border-box;
justify-self: start;
cursor: pointer;
position: relative;
font-family:
system,
-apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
font-size: var(--btn-font-size);
font-style: normal;
font-weight: 600;
letter-spacing: 0.06px;
line-height: var(--btn-line-height);
height: 100%;
min-height: var(--btn-height);
padding: calc(10 * var(--px-in-rem)) var(--sp-6);
color: white;
}
.ElasticButton_button[disabled] {
opacity: 0.6;
}
.ElasticButton_background {
border-radius: calc(6 * var(--px-in-rem));
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 150ms ease-in-out;
width: 100%;
z-index: 1000;
}
.ElasticButton_content {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--sp-2);
justify-content: center;
position: relative;
z-index: 10000;
}
.ElasticButton_elastic:hover .ElasticButton_background {
top: calc(-0.5 * var(--scale-size));
left: calc(-0.5 * var(--scale-size));
height: calc(100% + var(--scale-size));
width: calc(100% + var(--scale-size));
}
.ElasticButton_secondary {
color: var(--ddg-color-primary);
min-width: 80px;
}
@media (prefers-color-scheme: dark) {
.ElasticButton_secondary {
color: #7295F6;
}
}
.ElasticButton_secondary .ElasticButton_background {
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.09);
}
@media (prefers-color-scheme: dark) {
.ElasticButton_secondary .ElasticButton_background {
border-color: var(--color-white-at-12);
background: var(--color-white-at-3);
}
}
.ElasticButton_secondary:hover .ElasticButton_background {
background: rgba(0, 0, 0, 0.03);
}
.ElasticButton_secondary:active .ElasticButton_background {
background: rgba(0, 0, 0, 0.06);
}
.ElasticButton_primary {
font-weight: 700;
min-width: 116px;
}
.ElasticButton_primary .ElasticButton_background {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.24) 100%),
var(--ddg-color-primary);
box-shadow:
0px 4px 6px rgba(64, 38, 115, 0.16),
0px 6px 16px rgba(38, 64, 115, 0.16),
inset 0px 1px 0px rgba(255, 255, 255, 0.32);
}
.ElasticButton_primary:hover .ElasticButton_background {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.4) 100%),
#2b55ca;
}
.ElasticButton_primary:active .ElasticButton_background {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.24) 100%),
#1e42a4;
}
.ElasticButton_fixedWidthContainer {
display: inline-block;
position: relative;
}
.ElasticButton_hiddenContent {
display: inline-block;
visibility: hidden;
}
.ElasticButton_visibleContent {
display: inline-block;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
/* pages/onboarding/app/shared/components/ListItem.module.css */
.ListItem_step {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.ListItem_plain {
display: flex;
align-items: center;
padding-left: var(--sp-2);
padding-right: var(--sp-2);
gap: var(--sp-4);
}
.ListItem_plainContent {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.ListItem_inner {
display: flex;
gap: 16px;
align-items: center;
}
.ListItem_icon {
width: var(--sp-6);
height: var(--sp-6);
background-size: contain;
}
.ListItem_iconSmall {
width: var(--sp-4);
height: var(--sp-4);
background-size: contain;
}
.ListItem_contentWrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.ListItem_content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
.ListItem_title {
font-weight: 600;
font-size: 13px;
line-height: normal;
color: var(--color-black-at-84);
margin: 0;
}
@media only screen and (min-width: 481px) {
.ListItem_title {
font-size: 15px;
line-height: 15px;
}
}
@media (prefers-color-scheme: dark) {
.ListItem_title {
color: var(--color-white-at-84);
}
}
.ListItem_secondaryText {
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 14px;
color: var(--color-black-at-60);
margin: 0;
}
@media only screen and (min-width: 481px) {
.ListItem_secondaryText {
font-size: 13px;
line-height: 16px;
}
}
@media (prefers-color-scheme: dark) {
.ListItem_secondaryText {
color: var(--color-white-at-50);
}
}
.ListItem_inlineAction {
display: flex;
align-items: center;
}
.ListItem_children:empty {
display: none;
}
.ListItem_children:not(:empty) {
}
.ListItem_indentChild {
padding-left: calc(var(--sp-6) + 16px);
}
.ListItem_slideIn {
animation-name: ListItem_slidein;
animation-duration: 300ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ListItem_slideIn[data-index="0"] {
animation-delay: 300ms;
}
@keyframes ListItem_slidein {
from {
transform: translateY(40px);
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* pages/onboarding/app/v3/components/Buttons.module.css */
.Buttons_buttons {
display: flex;
gap: 8px;
flex-direction: row;
flex-wrap: wrap;
}
[data-platform-name=windows] .Buttons_buttons *:last-child {
order: -1;
}
.Buttons_button {
--btn-line-height: 11px;
--btn-line-height-large: 1;
--btn-line-height-xl: 1;
--btn-font-size: 11px;
--btn-font-size-large: 13px;
--btn-font-size-xl: 15px;
--btn-height: 24px;
--btn-height-large: 32px;
--btn-height-xl: 40px;
border: none;
outline: none;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
border-radius: 6px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.06px;
white-space: nowrap;
font-size: var(--btn-font-size);
line-height: var(--btn-line-height);
height: var(--btn-height);
padding: 8px 12px;
color: white;
}
[data-platform=windows] .Buttons_button {
--btn-font-size: 11px;
--btn-font-size-large: 13px;
--btn-font-size-xl: 14px;
}
.Buttons_button[disabled] {
opacity: 0.6;
}
.Buttons_button[aria-expanded=true] {
background: rgba(0, 0, 0, 0.03);
}
.Buttons_large {
padding: 12px 32px;
font-size: var(--btn-font-size-large);
line-height: var(--btn-line-height-large);
height: var(--btn-height-large);
}
.Buttons_xl {
padding: 12px 32px;
line-height: var(--btn-line-height-xl);
font-size: var(--btn-font-size-xl);
height: var(--btn-height-xl);
}
.Buttons_secondary {
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.09);
color: var(--ddg-color-primary);
min-width: 80px;
}
@media (prefers-color-scheme: dark) {
.Buttons_secondary {
border-color: var(--color-white-at-12);
background: var(--color-white-at-3);
color: #7295F6;
}
}
.Buttons_secondary:hover {
background: rgba(0, 0, 0, 0.03);
}
.Buttons_secondary:active {
background: rgba(0, 0, 0, 0.06);
}
.Buttons_primary {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.24) 100%),
var(--ddg-color-primary);
box-shadow:
0px 4px 6px rgba(64, 38, 115, 0.16),
0px 6px 16px rgba(38, 64, 115, 0.16),
inset 0px 1px 0px rgba(255, 255, 255, 0.32);
min-width: 116px;
}
.Buttons_primary:hover {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.4) 100%),
#2b55ca;
}
.Buttons_primary:active {
background:
radial-gradient(
70.96% 100% at 49.83% 0%,
rgba(107, 78, 186, 0) 39.72%,
rgba(107, 78, 186, 0.24) 100%),
#1e42a4;
}
/* shared/components/Switch/Switch.module.css */
.Switch_label {
--switch-width: 40px;
--switch-height: 20px;
--switch-handle-size: 12px;
--switch-handle-offset: 4px;
--switch-checked-offset: translateX(calc(100% + 8px));
--track-border-radius: 11px;
--track-border: 1px solid var(--track-border-color);
--track-border-color: var(--ds-color-theme-control-border-secondary, var(--ds-color-theme-default-light-control-border-secondary));
--track-bg-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-light-control-fill-primary));
--switch-handle-color: var(--ds-color-theme-icons-secondary, var(--ds-color-theme-default-light-icons-secondary));
--track-border-color-hover: var(--ds-color-theme-control-border-tertiary, var(--ds-color-theme-default-light-control-border-tertiary));
--track-bg-color-hover: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-light-control-fill-secondary));
--track-border-color-active: var(--ds-color-theme-control-border-quaternary, var(--ds-color-theme-default-light-control-border-quaternary));
--track-bg-color-active: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-light-control-fill-tertiary));
--track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
--track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
--switch-handle-color-checked: var(--ds-color-theme-accent-content-secondary, var(--ds-color-theme-default-light-accent-content-secondary));
--track-border-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
--track-bg-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
--track-border-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary));
--track-bg-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary));
vertical-align: top;
isolation: isolate;
align-items: flex-start;
max-inline-size: 100%;
display: inline-flex;
position: relative;
}
.Switch_label[data-theme=dark] {
--track-border-color: var(--ds-color-theme-control-border-secondary, var(--ds-color-theme-default-dark-control-border-secondary));
--track-bg-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-dark-control-fill-primary));
--switch-handle-color: var(--ds-color-theme-icons-secondary, var(--ds-color-theme-default-dark-icons-secondary));
--track-border-color-hover: var(--ds-color-theme-control-border-tertiary, var(--ds-color-theme-default-dark-control-border-tertiary));
--track-bg-color-hover: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-dark-control-fill-secondary));
--track-border-color-active: var(--ds-color-theme-control-border-quaternary, var(--ds-color-theme-default-dark-control-border-quaternary));
--track-bg-color-active: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-dark-control-fill-tertiary));
--track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));
--track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));
--switch-handle-color-checked: var(--ds-color-theme-accent-content-secondary, var(--ds-color-theme-default-dark-accent-content-secondary));
--track-border-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
--track-bg-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
--track-border-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary));
--track-bg-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary));
}
.Switch_label[data-platform-name=macos] {
--switch-width: 26px;
--switch-height: 15px;
--switch-handle-size: 13px;
--switch-handle-offset: 1px;
--switch-checked-offset: translateX(calc(100% - 2px));
--track-border-radius: 10px;
--track-border: 0;
--track-bg-color: var(--color-black-at-9);
--switch-handle-color: var(--color-white-at-84);
--track-bg-color-hover: var(--track-bg-color);
--track-border-color-hover: var(--track-border-color);
--track-bg-color-checked-hover: var(--track-bg-color-checked);
--track-border-color-checked-hover: var(--track-border-color-checked);
--track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
--track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
--switch-handle-color-checked: white;
--track-bg-color-active: var(--track-bg-color);
--track-bg-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
--track-border-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
}
.Switch_label[data-platform-name=macos][data-size=medium] {
--switch-width: 32px;
--switch-height: 18px;
--switch-handle-size: 16px;
}
.Switch_label[data-platform-name=macos][data-theme=dark] {
--track-bg-color: var(--color-white-at-9);
--switch-handle-color: var(--color-white-at-84);
--track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));
--track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));
--track-bg-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
--track-border-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
}
.Switch_input {
box-sizing: border-box;
opacity: .0001;
z-index: 1;
cursor: default;
block-size: 100%;
inline-size: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
border: initial;
-webkit-appearance: auto;
appearance: auto;
background-color: initial;
}
.Switch_input:hover + .Switch_switch:after {
background-color: var(--track-bg-color-hover);
border-color: var(--track-border-color-hover);
}
.Switch_input:active + .Switch_switch:after {
background-color: var(--track-bg-color-active);
border-color: var(--track-border-color-active);
}
.Switch_input:checked + .Switch_switch:before {
transform: var(--switch-checked-offset);
background-color: var(--switch-handle-color-checked);
}
[data-theme=dark][data-platform-name=macos] .Switch_input:checked + .Switch_switch:before {
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.10) inset;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.10)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.05));
}
.Switch_input:checked + .Switch_switch:after {
background: var(--track-bg-color-checked);
border-color: var(--track-border-color-checked);
}
[data-theme=dark][data-platform-name=macos] .Switch_input:checked + .Switch_switch:after {
box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.10) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.06) inset;
}
.Switch_input:checked:hover + .Switch_switch:after {
background-color: var(--track-bg-color-checked-hover);
border-color: var(--track-border-color-checked-hover);
}
.Switch_input:checked:active + .Switch_switch:after {
background-color: var(--track-bg-color-checked-active);
border-color: var(--track-border-color-checked-active);
}
.Switch_input[disabled] {
cursor: not-allowed;
}
.Switch_switch {
box-sizing: border-box;
inline-size: var(--switch-width);
margin: 0;
vertical-align: middle;
will-change: transform;
transition-delay: 0s;
transition-duration: 0.13s;
transition-property: background, border;
transition-timing-function: ease-in-out, ease-in-out;
block-size: var(--switch-height);
border-radius: 10px;
flex-grow: 0;
flex-shrink: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
}
.Switch_switch:before {
content: "";
box-sizing: border-box;
inline-size: var(--switch-handle-size);
block-size: var(--switch-handle-size);
border-radius: 10px;
display: block;
position: absolute;
top: var(--switch-handle-offset);
left: var(--switch-handle-offset);
z-index: 1;
transition: all .3s;
background: var(--switch-handle-color);
}
[data-platform-name=macos] .Switch_switch:before {
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.10) inset;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.10)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.05));
}
[data-platform-name=macos][data-theme=dark] .Switch_switch:before {
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.10) inset;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.10)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.05));
}
.Switch_switch:after {
border-radius: var(--track-border-radius);
content: "";
margin: 0;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: translateX(0);
transition: all .3s;
border: var(--track-border);
background-color: var(--track-bg-color);
}
[data-platform-name=macos] .Switch_switch:after {
box-shadow: 0px 0.5px 1px 1px rgba(10, 15, 20, 0.04) inset, 0px 0px 0px 0.5px rgba(10, 15, 20, 0.12) inset;
}
[data-platform-name=macos][data-theme=dark] .Switch_switch:after {
box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.10) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.06) inset;
}
/* pages/onboarding/app/shared/components/List.module.css */
.List_list {
padding: 28px;
display: flex;
flex-direction: column;
gap: 52px;
border-radius: 12px;
border: 1px solid var(--color-black-at-6);
background-color: var(--color-black-at-1);
-webkit-backdrop-filter: blur(64px);
backdrop-filter: blur(64px);
margin: 0;
width: 100%;
position: relative;
z-index: 1;
}
.List_list > li {
position: relative;
}
.List_list > li + li:after {
content: " ";
background: var(--color-black-at-3);
position: absolute;
top: -28px;
width: 100%;
height: 1px;
}
@media (prefers-color-scheme: dark) {
.List_list {
border: 1px solid var(--color-white-at-9);
background: var(--color-white-at-3);
}
.List_list > li + li:after {
background: var(--color-white-at-3);
}
}
.List_plainListContainer {
overflow: hidden;
height: 0;
transition: height 300ms ease-in-out;
min-height: calc(116 * var(--px-in-rem));
}
.List_plainList {
border-radius: var(--sp-3);
display: grid;
gap: var(--sp-8);
margin: 0;
padding: var(--sp-7) var(--sp-14);
width: 100%;
}
.List_plainList > li {
position: relative;
}
.List_borderedList {
gap: var(--sp-14);
}
.List_borderedList > li + li:after {
background: var(--color-black-at-9);
content: " ";
height: 1px;
position: absolute;
top: calc(-1 * var(--sp-7));
width: 100%;
}
@media (prefers-color-scheme: dark) {
.List_borderedList > li + li:after {
background: var(--color-white-at-12);
}
}
.List_summaryList {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
/* pages/onboarding/app/v3/components/DockInstructions.module.css */
.DockInstructions_root {
display: flex;
flex-direction: column;
gap: var(--sp-6);
max-width: 384px;
margin: 0 auto;
}
.DockInstructions_video {
width: 100%;
height: auto;
aspect-ratio: 384 / 188;
border-radius: var(--sp-2);
}
.DockInstructions_instruction {
display: flex;
gap: var(--sp-2);
}
.DockInstructions_icon {
width: var(--sp-4);
height: var(--sp-4);
}
.DockInstructions_instructionText {
margin: 0;
font-size: calc(14 * var(--px-in-rem));
line-height: calc(20 * var(--px-in-rem));
color: var(--theme-txt-color);
}
/* pages/onboarding/app/v3/components/Heading.module.css */
.Heading_heading {
display: inline-grid;
grid-template-columns: var(--sp-16) auto;
justify-self: start;
}
.Heading_headingContents {
padding: calc(18 * var(--px-in-rem)) var(--sp-6);
display: grid;
gap: var(--sp-3);
}
.Heading_title {
font-size: var(--sp-7);
font-family:
ui-rounded,
"SF Pro Rounded",
"Hiragino Maru Gothic ProN",
Quicksand,
Comfortaa,
Manjari,
Calibri,
"Arial Rounded MT",
"Arial Rounded MT Bold",
source-sans-pro,
sans-serif;
line-height: var(--sp-8);
font-weight: 700;
}
.Heading_subTitle {
font-size: var(--sp-4);
font-weight: 400;
line-height: 1.25;
white-space: pre-line;
transition: opacity .3s ease-in-out;
}
.Heading_svg {
width: var(--sp-16);
height: var(--sp-16);
border-radius: 50%;
box-shadow:
0px 0px 1px 0px rgba(62, 34, 140, 0.06),
0px 8px 24px 0px rgba(62, 34, 140, 0.06),
0px 32px 96px 0px rgba(30, 66, 164, 0.09);
animation-name: Heading_dax-bouncein;
animation-duration: 500ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes Heading_dax-bouncein {
0% {
transform: scale(0.5);
opacity: 0;
}
33% {
transform: scale(1.4);
opacity: 1;
}
60% {
transform: scale(0.9);
}
85% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.Heading_speechBubble {
display: inline-grid;
grid-template-columns: var(--sp-8) auto;
filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.8)) drop-shadow(0px 8px 24px rgba(62, 34, 140, 0.1)) drop-shadow(0px 6px 12px rgba(30, 66, 164, 0.1));
transform: translate3d(0, 0, 0);
}
@media (prefers-color-scheme: dark) {
.Heading_speechBubble {
filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.18)) drop-shadow(0px 8px 24px rgba(7, 0, 25, 0.06)) drop-shadow(0px 8px 32px rgba(5, 17, 51, 0.09));
}
}
.Heading_speechBubbleCallout {
backdrop-filter: blur(var(--sp-16));
-webkit-backdrop-filter: none;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.84) 0%,
rgba(255, 255, 255, 0.60) 100%);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-position: right var(--sp-8);
mask-position: right var(--sp-8);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: relative;
left: 1px;
}
@media (prefers-color-scheme: dark) {
.Heading_speechBubbleCallout {
background:
linear-gradient(
180deg,
#333 0%,
rgba(51, 51, 51, 0.72) 100%);
}
}
.Heading_speechBubbleContainer {
position: relative;
}
.Heading_speechBubbleBackground {
backdrop-filter: blur(var(--sp-16));
-webkit-backdrop-filter: none;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.84) 0%,
rgba(255, 255, 255, 0.60) 100%);
border-radius: var(--sp-6);
box-sizing: content-box;
min-height: var(--sp-24);
padding: 0 var(--sp-7);
position: absolute;
transition: all 300ms ease-in-out;
z-index: 1000;
}
@media (prefers-color-scheme: dark) {
.Heading_speechBubbleBackground {
background:
linear-gradient(
180deg,
#333 0%,
rgba(51, 51, 51, 0.72) 100%);
}
}
.Heading_speechBubbleContents {
align-items: center;
color: var(--color-black-at-84);
display: grid;
gap: var(--sp-3);
height: auto;
justify-items: start;
min-height: var(--sp-24);
padding: var(--sp-6) var(--sp-7);
position: relative;
width: auto;
z-index: 100000;
}
@media (prefers-color-scheme: dark) {
.Heading_speechBubbleContents {
color: var(--color-white-at-84);
}
}
.Heading_speechBubbleContents .Heading_title {
font-size: calc(22 * var(--px-in-rem));
line-height: 1.2;
font-weight: 600;
}
[data-platform-name=windows] :is(.Heading_speechBubbleContents .Heading_title) {
font-size: var(--sp-6);
}
.Heading_additionalContent {
padding-top: var(--sp-3);
}
.Heading_titleContainer {
display: grid;
gap: var(--sp-2);
}
.Heading_hidden {
visibility: hidden;
opacity: 0;
}
/* pages/onboarding/app/shared/components/Progress.module.css */
.Progress_progressContainer {
white-space: nowrap;
text-align: right;
min-width: 64px;
font-style: normal;
font-weight: 700;
font-size: 11px;
line-height: 11px;
color: var(--theme-txt-color-progress);
animation-name: Progress_fade-in;
animation-fill-mode: forwards;
animation-duration: 200ms;
animation-delay: 300ms;
opacity: 0;
}
@keyframes Progress_fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.Progress_count {
text-align: right;
}
.Progress_progress {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
}
.Progress_progress[value]::-webkit-progress-bar {
border-radius: 64px;
background: rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.18);
}
@media (prefers-color-scheme: dark) {
.Progress_progress[value]::-webkit-progress-bar {
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.18);
}
}
.Progress_progress[value]::-webkit-progress-value {
background:
linear-gradient(
90deg,
#3969ef 0%,
#6b4eba 48.24%,
#de5833 100%);
border-radius: 72px;
}
.Progress_singleLineContainer {
display: grid;
grid-template-columns: 1fr auto;
column-gap: var(--sp-2);
align-items: center;
}
.Progress_singleLineContainer .Progress_progress {
order: -1;
}
[data-reduced-motion=true] .Progress_singleLineContainer {
opacity: 1;
}
/* pages/onboarding/app/v3/components/SingleStep.module.css */
.SingleStep_panel {
display: grid;
padding: var(--sp-6);
row-gap: var(--sp-6);
}
.SingleStep_heading {
margin-top: calc(-1 * var(--sp-10));
margin-left: calc(-1 * var(--sp-10));
margin-right: calc(-1 * var(--sp-30));
}
.SingleStep_boxed {
-webkit-backdrop-filter: blur(var(--sp-16));
backdrop-filter: blur(var(--sp-16));
background: var(--color-white-at-24);
border-radius: var(--sp-8);
box-shadow: 0px 8px 24px 0px rgba(62, 34, 140, 0.16), 0px 32px 128px 0px rgba(30, 66, 164, 0.16);
}
@media (prefers-color-scheme: dark) {
.SingleStep_boxed {
background: var(--color-black-at-48);
box-shadow: 0px 8px 24px 0px rgba(7, 0, 25, 0.06), 0px 32px 128px 0px rgba(5, 17, 51, 0.09);
}
}
.SingleStep_container {
display: grid;
gap: var(--sp-8) var(--sp-2);
grid-template-rows: auto var(--sp-9);
grid-template-columns: var(--sp-20) 1fr;
grid-template-areas: "content content" "progress buttons";
align-items: center;
}
.SingleStep_content {
grid-area: content;
display: flex;
align-items: center;
justify-content: center;
}
.SingleStep_progress {
grid-area: progress;
}
.SingleStep_buttonBar {
grid-area: buttons;
}
.SingleStep_buttonBarContents {
display: grid;
gap: var(--sp-2);
grid-template-columns: 1fr auto auto;
grid-template-areas: ". dismiss accept";
}
[data-platform-name=windows] .SingleStep_buttonBarContents {
grid-template-areas: ". accept dismiss";
}
.SingleStep_dismiss {
grid-area: dismiss;
}
.SingleStep_accept {
grid-area: accept;
}
/* pages/onboarding/app/v3/components/Hiker.module.css */
.Hiker_hiker {
bottom: 0;
position: fixed;
right: var(--sp-35);
animation-name: Hiker_hiker-appear;
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes Hiker_hiker-appear {
from {
transform: translateX(-300px) translateY(400px);
}
to {
transform: translateX(0) translateY(0);
}
}
/* pages/onboarding/app/v3/App.module.css */
#app {
height: 100%;
}
[data-app-version="2"] .App_main {
font-family:
system,
-apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
height: 100%;
position: relative;
}
[data-app-version="2"] .App_container {
margin-left: auto;
margin-right: auto;
max-width: 640px;
padding-bottom: 80px;
padding-top: 80px;
position: relative;
width: calc(100% - 64px);
z-index: 1;
transition: transform 0.3s ease-in-out;
transform: translateY(0);
}
[data-app-version="2"] .App_container[data-current=welcome],
[data-app-version="2"] .App_container[data-current=getStarted] {
transform: translateY(max(50vh - 288px, 0px));
}
[data-app-version="2"] [data-exiting=true] {
animation-name: none;
}
/* pages/onboarding/app/v4/fonts.css */
@font-face {
font-family: "DuckSansDisplay";
src: url("./duck-sans-display-regular-OTNSQGSS.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "DuckSansDisplay";
src: url("./duck-sans-display-medium-OG7XTNTA.otf") format("opentype");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "DuckSansDisplay";
src: url("./duck-sans-display-bold-OGZK52GG.otf") format("opentype");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "DuckSansProduct";
src: url("./duck-sans-product-regular-HCAWLXXH.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "DuckSansProduct";
src: url("./duck-sans-product-medium-7JEPME6Z.otf") format("opentype");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "DuckSansProduct";
src: url("./duck-sans-product-bold-5E34NRMY.otf") format("opentype");
font-weight: 700;
font-display: swap;
}
/* ../node_modules/@duckduckgo/design-tokens/build/desktop-browsers/onboarding.css */
.theme-light {
--ds-surface-backdrop: #ffffff;
--ds-surface-primary: #ecebe7;
--ds-surface-secondary: #f7f5f2;
--ds-surface-tertiary: #ffffff;
--ds-surface-decoration-primary: rgba(0, 0, 0, 0.09);
--ds-surface-decoration-secondary: rgba(0, 0, 0, 0.16);
--ds-text-primary: rgba(36, 35, 35, 0.96);
--ds-text-secondary: rgba(36, 35, 35, 0.6);
--ds-accent-primary: #4397e0;
--ds-accent-secondary: #1074cc;
--ds-accent-primary-text-color: #1074cc;
--ds-accent-primary-content-color: #ffffff;
--ds-accent-button-primary: #f05f2b;
--ds-accent-button-secondary: #cc3b0a;
--ds-accent-button-primary-content-color: #ffffff;
--ds-accent-alt-primary: #cbeaff;
--ds-accent-alt-glow-primary: rgba(161, 208, 247, 0.16);
--ds-accent-alt-glow-secondary: rgba(161, 208, 247, 0.08);
--ds-control-primary-border-color: rgba(0, 0, 0, 0.2);
--ds-control-primary-background-color: rgba(0, 0, 0, 0.06);
--ds-control-secondary-background-color: rgba(0, 0, 0, 0.09);
--ds-shadow-secondary-color: rgba(0, 0, 0, 0.08);
}
.theme-dark {
--ds-surface-backdrop: #034180;
--ds-surface-primary: #034180;
--ds-surface-secondary: #02254d;
--ds-surface-tertiary: #01142d;
--ds-surface-decoration-primary: rgba(255, 255, 255, 0.06);
--ds-surface-decoration-secondary: rgba(255, 255, 255, 0.09);
--ds-text-primary: #ffffff;
--ds-text-secondary: #d1cecb;
--ds-accent-primary: #75b6eb;
--ds-accent-secondary: #4397e0;
--ds-accent-primary-text-color: #75b6eb;
--ds-accent-primary-content-color: #242323;
--ds-accent-button-primary: #ffd885;
--ds-accent-button-secondary: #ffc95c;
--ds-accent-button-primary-content-color: #240f04;
--ds-accent-alt-primary: #034180;
--ds-accent-alt-glow-primary: rgba(161, 208, 247, 0.12);
--ds-accent-alt-glow-secondary: rgba(161, 208, 247, 0.08);
--ds-control-primary-border-color: rgba(255, 255, 255, 0.36);
--ds-control-primary-background-color: rgba(255, 255, 255, 0.12);
--ds-control-secondary-background-color: rgba(255, 255, 255, 0.18);
--ds-shadow-secondary-color: rgba(0, 0, 0, 0.08);
}
/* pages/onboarding/app/v4/App.module.css */
:root {
--font-display:
"DuckSansDisplay",
system-ui,
sans-serif;
--font-product:
"DuckSansProduct",
system-ui,
sans-serif;
}
.App_container2 {
--bubble-bg: var(--ds-surface-tertiary);
--bubble-border: var(--ds-accent-alt-primary);
display: flow-root;
position: relative;
}
/* pages/onboarding/app/v4/components/Background.module.css */
.Background_background2 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--ds-surface-tertiary);
}
.theme-dark .Background_background2 {
background-color: var(--ds-accent-alt-primary);
}
.Background_illustration {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.Background_rightAligned {
left: auto;
right: 0;
transform: none;
}
.Background_illustration img {
display: block;
}
.Background_slideIn {
animation: Background_slide-in 0.7s 0.2s both;
}
.Background_slideOut {
animation: Background_slide-out 0.7s both, Background_fade-out 0.333s both;
}
@keyframes Background_slide-in {
0% {
translate: 0 100%;
animation-timing-function: cubic-bezier(0.1, 0.85, 0.64, 0.99);
}
100% {
translate: 0 0;
}
}
@keyframes Background_slide-out {
0% {
translate: 0 0;
animation-timing-function: cubic-bezier(0.1, 0.85, 0.64, 0.99);
}
100% {
translate: 0 100%;
}
}
@keyframes Background_fade-out {
0% {
opacity: 1;
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.Background_slideIn,
.Background_slideOut {
animation: none;
}
}
/* pages/onboarding/app/v4/components/DaxBobbingAnimation.module.css */
.DaxBobbingAnimation_root {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.DaxBobbingAnimation_slideIn {
animation: DaxBobbingAnimation_slide-in 0.7s 0.2s both;
}
.DaxBobbingAnimation_slideOut {
animation: DaxBobbingAnimation_slide-out 0.7s both;
}
@keyframes DaxBobbingAnimation_slide-in {
0% {
translate: 0 200px;
animation-timing-function: cubic-bezier(0.1, 0.85, 0.64, 0.99);
}
100% {
translate: 0 0;
}
}
@keyframes DaxBobbingAnimation_slide-out {
0% {
translate: 0 0;
animation-timing-function: cubic-bezier(0.1, 0.85, 0.64, 0.99);
}
100% {
translate: 0 200px;
}
}
@media (prefers-reduced-motion: reduce) {
.DaxBobbingAnimation_slideIn,
.DaxBobbingAnimation_slideOut {
animation: none;
}
}
/* pages/onboarding/app/v4/components/Bubble.module.css */
.Bubble_bubble {
position: relative;
}
.Bubble_progressBadge {
position: absolute;
top: 0;
right: var(--sp-9);
transform: translateY(-50%);
background: var(--bubble-bg);
padding: calc(6 * var(--px-in-rem)) calc(10 * var(--px-in-rem)) calc(6 * var(--px-in-rem)) var(--sp-2);
border: 1.5px solid var(--bubble-border);
border-radius: var(--sp-16);
}
.Bubble_frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--bubble-bg);
border-radius: var(--sp-9);
border: 1.5px solid var(--bubble-border);
box-shadow: 0 7px 12px rgba(0, 0, 0, 0.03);
}
.Bubble_container {
overflow: hidden;
position: absolute;
top: 1.5px;
right: 1.5px;
bottom: 1.5px;
left: 1.5px;
}
.Bubble_content {
width: var(--bubble-width);
}
.Bubble_fadeOut {
animation: Bubble_fade-out 100ms cubic-bezier(0.66, 0, 0.34, 1) forwards;
}
.Bubble_fadeIn {
animation: Bubble_fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) var(--fade-in-delay, 400ms) backwards;
}
.Bubble_deferred {
opacity: 0;
}
.Bubble_bottomLeftTail {
position: absolute;
bottom: -34px;
left: 80px;
line-height: 0;
overflow: hidden;
pointer-events: none;
}
.Bubble_bottomLeftTail svg {
display: block;
transform: translateY(-100%);
transition: transform 333ms cubic-bezier(0.17, 0, 0.34, 1) 67ms;
}
.Bubble_bottomLeftTail svg.Bubble_active {
transform: translateY(-2px);
}
.Bubble_rightTail {
position: absolute;
right: -24px;
bottom: 36px;
line-height: 0;
overflow: hidden;
pointer-events: none;
}
.Bubble_rightTail svg {
display: block;
transform: translateX(-100%);
transition: transform 333ms cubic-bezier(0.17, 0, 0.34, 1) 400ms;
}
.Bubble_rightTail svg.Bubble_active {
transform: translateX(-2px);
}
@keyframes Bubble_fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes Bubble_fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.Bubble_fadeOut,
.Bubble_fadeIn {
animation: none;
}
.Bubble_bottomLeftTail svg,
.Bubble_rightTail svg {
transition-duration: 0s;
transition-delay: 0s;
}
}
/* pages/onboarding/app/v4/components/ProgressIndicator.module.css */
.ProgressIndicator_progress {
display: flex;
align-items: center;
gap: var(--sp-5);
}
.ProgressIndicator_dots {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.ProgressIndicator_dot {
display: block;
border-radius: 50%;
}
.ProgressIndicator_active {
width: var(--sp-3);
height: var(--sp-3);
background: var(--ds-accent-primary);
}
.ProgressIndicator_complete {
width: calc(6 * var(--px-in-rem));
height: calc(6 * var(--px-in-rem));
background: var(--ds-accent-primary);
}
.ProgressIndicator_incomplete {
width: calc(6 * var(--px-in-rem));
height: calc(6 * var(--px-in-rem));
background: var(--ds-accent-alt-primary);
}
.ProgressIndicator_text {
font-family: var(--font-product);
font-size: var(--sp-3);
font-weight: 400;
line-height: var(--sp-3);
color: var(--ds-text-primary);
}
/* pages/onboarding/app/v4/components/ComparisonTable.module.css */
.ComparisonTable_table {
border-spacing: 0;
width: 100%;
}
.ComparisonTable_table thead th {
padding-bottom: var(--sp-4);
}
.ComparisonTable_rowHeading {
font-size: calc(14 * var(--px-in-rem));
font-weight: 400;
line-height: calc(16 * var(--px-in-rem));
padding: var(--sp-3) var(--sp-1) var(--sp-3) var(--sp-3);
}
.ComparisonTable_rowCell {
text-align: center;
}
.ComparisonTable_rowCell + .ComparisonTable_rowCell {
border-left: 1px solid var(--ds-surface-decoration-primary);
}
.ComparisonTable_row2:nth-child(odd) .ComparisonTable_rowHeading,
.ComparisonTable_row2:nth-child(odd) .ComparisonTable_rowCell {
background: var(--ds-accent-alt-glow-primary);
}
.ComparisonTable_row2:nth-child(odd) .ComparisonTable_rowHeading {
border-radius: var(--sp-4) 0 0 var(--sp-4);
}
.ComparisonTable_row2:nth-child(odd) .ComparisonTable_rowCell:last-child {
border-radius: 0 var(--sp-4) var(--sp-4) 0;
}
.ComparisonTable_rowHeadingContents2 {
align-items: center;
display: flex;
gap: var(--sp-3);
text-align: left;
}
.ComparisonTable_rowIcon2 {
height: var(--sp-6);
width: var(--sp-6);
}
.ComparisonTable_status2 {
display: inline-block;
}
.ComparisonTable_notSupported2 {
height: var(--sp-6);
width: var(--sp-6);
background-image: url("./cross-circle-72LP6KPS.svg");
}
.ComparisonTable_partialSupport2 {
height: var(--sp-6);
width: var(--sp-6);
background-image: url("./stop-circle-4LWCV2CW.svg");
}
.ComparisonTable_fullSupport2 {
height: var(--sp-5);
width: var(--sp-5);
background-image: url("./check-circle-URFG36FK.svg");
animation: ComparisonTable_bouncein 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(400ms + var(--row-index) * 80ms);
}
[data-reduced-motion=true] .ComparisonTable_fullSupport2 {
animation: none;
}
@keyframes ComparisonTable_bouncein {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.3);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.ComparisonTable_browserIcon2 {
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
border-radius: var(--sp-2);
box-shadow: 0px 1.25px 3.75px 0px rgba(0, 0, 0, 0.1), 0px 5px 10px 0px rgba(0, 0, 0, 0.08);
display: inline-block;
margin: 0 var(--sp-2);
height: var(--sp-10);
width: var(--sp-10);
}
.ComparisonTable_browserIconChrome2 {
background-image: url("./chrome-CN5U36NT.svg");
}
.ComparisonTable_browserIconSafari2 {
background-image: url("./safari-HDKLSKMI.svg");
}
.ComparisonTable_browserIconDuckDuckGo2 {
background-color: var(--ds-color-palette-red-50);
background-image: url("./ddg-VAGQ4AK4.svg");
}
/* pages/onboarding/app/v4/components/Button.module.css */
.Button_button {
align-items: center;
border-radius: var(--sp-16);
border: none;
cursor: pointer;
display: inline-flex;
font-family: var(--font-product);
font-size: calc(15 * var(--px-in-rem));
font-weight: 400;
gap: var(--sp-2);
height: var(--sp-9);
justify-content: center;
line-height: calc(15 * var(--px-in-rem));
min-width: var(--sp-32);
padding: var(--sp-4) var(--sp-6);
text-align: center;
}
.Button_button:disabled {
opacity: 0.4;
cursor: default;
}
.Button_primary {
background: var(--ds-accent-button-primary);
color: var(--ds-accent-button-primary-content-color);
}
.Button_primary:hover:not(:disabled),
.Button_primary:active:not(:disabled) {
background: var(--ds-accent-button-secondary);
}
.Button_secondary {
background: var(--ds-control-primary-background-color);
color: var(--ds-text-primary);
}
.Button_secondary:hover:not(:disabled),
.Button_secondary:active:not(:disabled) {
background: var(--ds-control-secondary-background-color);
}
.Button_wide {
padding-left: var(--sp-24);
padding-right: var(--sp-24);
}
.Button_stretch {
align-self: stretch;
width: 100%;
}
/* pages/onboarding/app/v4/components/Container.module.css */
.Container_root {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
gap: var(--sp-8);
padding: var(--sp-12);
}
/* pages/onboarding/app/v4/components/Title.module.css */
.Title_title {
font-family: var(--font-display);
font-size: var(--sp-6);
font-weight: 700;
line-height: var(--sp-7);
text-align: left;
color: var(--ds-text-primary);
word-wrap: break-word;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
margin: 0;
}
/* pages/onboarding/app/v4/components/MakeDefaultContent.module.css */
.MakeDefaultContent_root {
padding: var(--sp-9) var(--sp-12);
}
.MakeDefaultContent_titleContainer {
position: relative;
align-self: stretch;
}
.MakeDefaultContent_title {
padding: calc(2 * var(--px-in-rem)) var(--sp-3);
}
.MakeDefaultContent_sparkle {
position: absolute;
top: 0;
left: -7px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.MakeDefaultContent_sparkle.MakeDefaultContent_hidden {
visibility: hidden;
}
.MakeDefaultContent_content {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
gap: var(--sp-8);
animation: MakeDefaultContent_stagger-fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) var(--stagger-delay, 650ms) backwards;
}
.MakeDefaultContent_actions {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
gap: var(--sp-2);
align-self: stretch;
}
[data-platform-name=windows] .MakeDefaultContent_actions > *:last-child {
order: -1;
}
.MakeDefaultContent_skipButton {
flex: 1;
}
@keyframes MakeDefaultContent_stagger-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.MakeDefaultContent_hidden {
opacity: 0;
transition: none;
}
.MakeDefaultContent_revealable {
transition: opacity 0.3s ease-in-out;
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.MakeDefaultContent_content {
animation: none;
}
.MakeDefaultContent_revealable {
transition: none;
}
}
/* pages/onboarding/app/v4/components/SettingsContent.module.css */
.SettingsContent_rows {
display: flex;
flex-direction: column;
align-self: stretch;
border-radius: var(--sp-3);
gap: var(--sp-5);
}
.SettingsContent_row {
display: flex;
align-items: center;
gap: var(--sp-4);
border-radius: var(--sp-2);
}
.SettingsContent_rowContent {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-4);
position: relative;
}
.SettingsContent_rowMain {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.SettingsContent_rowIcon {
width: var(--sp-6);
height: var(--sp-6);
flex-shrink: 0;
}
.SettingsContent_rowText {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.SettingsContent_rowTitle {
font-family: var(--font-product);
font-size: calc(15 * var(--px-in-rem));
font-weight: 700;
line-height: calc(18 * var(--px-in-rem));
color: var(--ds-text-primary);
margin: 0;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.SettingsContent_rowSubtitle {
font-family: var(--font-product);
font-size: calc(14 * var(--px-in-rem));
font-weight: 400;
line-height: calc(17 * var(--px-in-rem));
color: var(--ds-text-secondary);
margin: 0;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.SettingsContent_rowInline {
display: flex;
align-items: center;
flex-shrink: 0;
}
.SettingsContent_divider {
height: 1px;
align-self: stretch;
background: var(--ds-surface-decoration-secondary);
}
.SettingsContent_rowButtons {
display: flex;
padding-left: var(--sp-10);
gap: var(--sp-2);
}
[data-platform-name=windows] .SettingsContent_rowButtons > *:last-child {
order: -1;
}
.SettingsContent_actions {
display: flex;
justify-content: center;
align-self: stretch;
}
.SettingsContent_fadeIn {
animation: SettingsContent_fadeIn 250ms ease-out both;
}
.SettingsContent_fadeInDelayed {
animation: SettingsContent_fadeIn 250ms ease-out both;
animation-delay: 200ms;
}
@keyframes SettingsContent_fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.SettingsContent_fadeIn,
.SettingsContent_fadeInDelayed {
animation-duration: 0s;
animation-delay: 0s;
}
}
/* pages/onboarding/app/v4/components/StepHeader.module.css */
.StepHeader_root {
display: flex;
flex-direction: column;
align-self: stretch;
padding: var(--sp-9) var(--sp-12);
gap: var(--sp-7);
}
[data-current=addressBarMode] .StepHeader_root {
padding-top: var(--sp-11);
padding-bottom: var(--sp-11);
}
.StepHeader_title {
font-family: var(--font-display);
font-size: var(--sp-6);
font-weight: 700;
line-height: var(--sp-7);
text-align: left;
white-space: pre-line;
color: var(--ds-text-primary);
margin: 0;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.StepHeader_subtitle {
font-family: var(--font-product);
font-size: calc(18 * var(--px-in-rem));
font-weight: 400;
line-height: calc(22 * var(--px-in-rem));
text-align: left;
white-space: pre-line;
color: var(--ds-text-primary);
margin: 0;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
transition: opacity 0.3s ease-in-out;
}
.StepHeader_subtitle.StepHeader_hidden {
opacity: 0;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.StepHeader_subtitle {
transition: none;
}
}
/* pages/onboarding/app/v4/components/DuckPlayerContent.module.css */
.DuckPlayerContent_imageContainer {
position: relative;
align-self: stretch;
overflow: visible;
border-radius: var(--sp-2);
display: flex;
justify-content: center;
align-items: center;
}
.DuckPlayerContent_sparkle {
position: absolute;
top: -4px;
left: -13px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.DuckPlayerContent_promoImage {
display: block;
width: 100%;
height: auto;
}
.DuckPlayerContent_videoContainer {
position: relative;
align-self: stretch;
overflow: hidden;
border-radius: var(--sp-3);
}
.DuckPlayerContent_video {
display: block;
width: 100%;
height: auto;
position: relative;
}
.DuckPlayerContent_video.DuckPlayerContent_hidden {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}
.DuckPlayerContent_actions {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: var(--sp-2);
align-self: stretch;
}
[data-platform-name=windows] .DuckPlayerContent_actions > *:last-child {
order: -1;
}
.DuckPlayerContent_toggleButton,
.DuckPlayerContent_nextButton {
flex: 1 1 0;
padding-left: var(--sp-2);
padding-right: var(--sp-2);
}
/* pages/onboarding/app/v4/components/AddressBarPreview.module.css */
.AddressBarPreview_wrapper2 {
position: relative;
width: 100%;
}
.AddressBarPreview_image2 {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.AddressBarPreview_wrapper2 {
--address-bar-left: 20.14%;
--address-bar-top: 24.04%;
--address-bar-width: 59.72%;
--address-bar-height: 24.04%;
--address-bar-height-reduced: 14.42%;
--address-bar-transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.AddressBarPreview_bgOverlay2 {
position: absolute;
z-index: 1;
left: var(--address-bar-left);
top: var(--address-bar-top);
width: var(--address-bar-width);
height: var(--address-bar-height);
background-color: #fff;
border-radius: calc(15 * var(--px-in-rem));
pointer-events: none;
transition: var(--address-bar-transition), background-color 300ms ease;
}
.AddressBarPreview_bgReduced2 {
height: var(--address-bar-height-reduced);
border-radius: calc(11 * var(--px-in-rem));
}
.AddressBarPreview_borderOverlay2 {
position: absolute;
z-index: 2;
left: var(--address-bar-left);
top: var(--address-bar-top);
width: var(--address-bar-width);
height: var(--address-bar-height);
border: 2px solid;
border-radius: calc(15 * var(--px-in-rem));
pointer-events: none;
box-sizing: border-box;
transition: var(--address-bar-transition);
}
.AddressBarPreview_borderReduced2 {
height: var(--address-bar-height-reduced);
border-radius: calc(11 * var(--px-in-rem));
}
.AddressBarPreview_regularIcon2 {
position: absolute;
z-index: 3;
right: 23.4%;
top: 28.4%;
width: 2.78%;
height: auto;
pointer-events: none;
}
.AddressBarPreview_extendedIcon2 {
position: absolute;
z-index: 3;
right: 21.3%;
top: 26.4%;
width: 12.96%;
height: auto;
pointer-events: none;
}
/* pages/onboarding/app/v4/components/AddressBarContent.module.css */
.AddressBarContent_root {
gap: 0;
}
.AddressBarContent_previewContainer {
align-self: stretch;
overflow: hidden;
border-radius: var(--sp-2);
}
.AddressBarContent_toggleButtons {
display: flex;
align-self: stretch;
gap: var(--sp-2);
margin-top: var(--sp-3);
font-family: var(--font-product);
font-size: calc(14 * var(--px-in-rem));
line-height: calc(18 * var(--px-in-rem));
--toggle-accent-light: var(--ds-accent-primary);
--toggle-accent-text-light: var(--ds-accent-primary-text-color);
--toggle-accent-bg-light: var(--ds-accent-alt-glow-secondary);
--toggle-border-light: var(--ds-control-primary-border-color);
--toggle-color-light: var(--ds-text-primary);
--toggle-radio-light: var(--ds-accent-primary);
--toggle-accent-dark: var(--ds-accent-primary);
--toggle-accent-text-dark: var(--ds-accent-primary);
--toggle-accent-bg-dark: var(--ds-accent-alt-glow-secondary);
--toggle-bg-dark: var(--ds-surface-tertiary);
--toggle-border-dark: var(--ds-control-primary-border-color);
--toggle-color-dark: var(--ds-text-primary);
--toggle-radio-dark: var(--ds-accent-primary);
--toggle-radio-check-dark: var(--ds-accent-primary-content-color);
}
.AddressBarContent_footer {
display: flex;
align-items: center;
gap: var(--sp-2);
align-self: stretch;
margin-top: calc(26 * var(--px-in-rem));
}
.AddressBarContent_starIcon {
width: var(--sp-6);
height: var(--sp-6);
flex-shrink: 0;
}
.AddressBarContent_footerText {
font-size: calc(13 * var(--px-in-rem));
line-height: calc(16 * var(--px-in-rem));
color: var(--ds-text-primary);
}
.AddressBarContent_footerText :where(b) {
font-weight: 700;
}
.AddressBarContent_startButton {
margin-top: var(--sp-8);
}
/* pages/onboarding/app/v4/components/WelcomeContent.module.css */
.WelcomeContent_root {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--sp-5);
justify-content: flex-start;
margin-top: 40vh;
transform: translateY(-50%);
width: 100%;
}
.WelcomeContent_title {
font-family: var(--font-display);
font-size: var(--sp-11);
font-weight: 500;
line-height: var(--sp-11);
text-align: center;
color: var(--ds-text-primary);
word-wrap: break-word;
animation: WelcomeContent_slide-up 3.033s both, WelcomeContent_fade-in-out 3.033s both;
}
.WelcomeContent_logo {
animation: WelcomeContent_scale-down 3.033s both, WelcomeContent_fade-out 3.033s both;
}
@keyframes WelcomeContent_slide-up {
0%, 13.19% {
transform: translateY(49px);
animation-timing-function: cubic-bezier(0.4, 0, 0.74, 1);
}
29.67%, 100% {
transform: translateY(0);
}
}
@keyframes WelcomeContent_fade-in-out {
0%, 13.19% {
opacity: 0;
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
29.67%, 90.11% {
opacity: 1;
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
100% {
opacity: 0;
}
}
@keyframes WelcomeContent_scale-down {
0%, 13.19% {
transform: scale(1.786);
animation-timing-function: cubic-bezier(0.26, 0.64, 0.48, 1);
}
35.16%, 100% {
transform: scale(1);
}
}
@keyframes WelcomeContent_fade-out {
0%, 90.11% {
opacity: 1;
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.WelcomeContent_title {
animation: none;
}
.WelcomeContent_logo {
animation: none;
}
}
/* pages/onboarding/app/v4/components/GetStartedContent.module.css */
.GetStartedContent_root {
align-items: flex-start;
animation: GetStartedContent_slide-up 0.9s both, GetStartedContent_fade-in 0.9s both;
}
.GetStartedContent_text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-7);
padding: 0 var(--sp-3);
align-self: stretch;
}
.GetStartedContent_title {
align-self: stretch;
}
.GetStartedContent_body {
font-family: var(--font-product);
font-size: calc(18 * var(--px-in-rem));
font-weight: 400;
line-height: calc(22 * var(--px-in-rem));
text-align: left;
color: var(--ds-text-primary);
word-wrap: break-word;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
white-space: pre-line;
margin: 0;
align-self: stretch;
}
@keyframes GetStartedContent_slide-up {
0%, 40.74% {
translate: 0 41px;
animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
}
77.78%, 100% {
translate: 0 0;
}
}
@keyframes GetStartedContent_fade-in {
0%, 51.85% {
opacity: 0;
animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
}
81.48%, 100% {
opacity: 1;
}
}
.GetStartedContent_hidden {
opacity: 0;
transition: none;
}
.GetStartedContent_revealable {
transition: opacity 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.GetStartedContent_root {
animation: none;
}
.GetStartedContent_revealable {
transition: none;
}
}
/* pages/onboarding/app/v4/components/GetStartedAnimation.module.css */
.GetStartedAnimation_root {
position: relative;
left: -138px;
top: 206px;
}
.GetStartedAnimation_fadeOut {
animation: GetStartedAnimation_fade-out 100ms cubic-bezier(0.66, 0, 0.34, 1) both;
}
@keyframes GetStartedAnimation_fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* pages/onboarding/app/v4/components/SystemSettingsAnimation.module.css */
.SystemSettingsAnimation_background,
.SystemSettingsAnimation_foreground {
position: absolute;
left: calc(100% - 80px);
top: calc((var(--bubble-bottom-height) - 140px) / 2 + 8px);
}
.SystemSettingsAnimation_fadeOut {
animation: SystemSettingsAnimation_fade-out 100ms cubic-bezier(0.66, 0, 0.34, 1) both;
}
@keyframes SystemSettingsAnimation_fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* pages/onboarding/app/v4/components/FadeTransition.module.css */
.FadeTransition_fadeOut {
animation: FadeTransition_fade-out 100ms cubic-bezier(0.66, 0, 0.34, 1) forwards;
}
.FadeTransition_fadeIn {
animation: FadeTransition_fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) 233ms backwards;
}
@keyframes FadeTransition_fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes FadeTransition_fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.FadeTransition_fadeOut,
.FadeTransition_fadeIn {
animation: none;
}
}
/* pages/onboarding/app/v4/components/DockInstructionsContent.module.css */
.DockInstructionsContent_video {
width: 100%;
height: auto;
aspect-ratio: 384 / 188;
border-radius: var(--sp-2);
object-fit: cover;
}
.DockInstructionsContent_instruction {
display: flex;
align-items: center;
gap: var(--sp-2);
align-self: stretch;
}
.DockInstructionsContent_icon {
width: var(--sp-6);
height: var(--sp-6);
flex-shrink: 0;
}
.DockInstructionsContent_instructionText {
margin: 0;
font-size: calc(14 * var(--px-in-rem));
line-height: calc(20 * var(--px-in-rem));
color: var(--ds-text-primary);
}
/* pages/onboarding/app/v4/components/SingleStep.module.css */
.SingleStep_layout {
--bubble-width: 530px;
--bubble-height: auto;
--bubble-leading: max(var(--sp-10), calc(40vh - var(--bubble-height) / 2));
isolation: isolate;
margin: 0 auto;
position: relative;
transition-delay: 67ms;
transition-duration: 333ms;
transition-property: width;
transition-timing-function: cubic-bezier(0.17, 0, 0.34, 1);
width: var(--bubble-width);
}
.SingleStep_layout.SingleStep_narrow {
--bubble-width: 349px;
}
.SingleStep_layout.SingleStep_hasTop {
--bubble-height: var(--bubble-top-height);
}
.SingleStep_layout.SingleStep_hasBottom {
--bubble-height: var(--bubble-bottom-height);
}
.SingleStep_layout.SingleStep_hasTop.SingleStep_hasBottom {
--bubble-height: calc(var(--bubble-top-height) + var(--sp-2) + var(--bubble-bottom-height));
}
.SingleStep_topBubble,
.SingleStep_bottomBubble {
position: absolute;
transition-delay: 67ms;
transition-duration: 333ms;
transition-property:
top,
width,
height;
transition-timing-function: cubic-bezier(0.17, 0, 0.34, 1);
width: var(--bubble-width);
}
.SingleStep_topBubble {
height: var(--bubble-bottom-height);
top: var(--bubble-leading);
visibility: hidden;
}
.SingleStep_hasTop .SingleStep_topBubble {
height: var(--bubble-top-height);
visibility: visible;
}
.SingleStep_bottomBubble,
.SingleStep_illustrationBackground,
.SingleStep_illustrationForeground {
height: var(--bubble-bottom-height);
top: var(--bubble-leading);
}
.SingleStep_hasTop :is(.SingleStep_bottomBubble, .SingleStep_illustrationBackground, .SingleStep_illustrationForeground) {
top: calc(var(--bubble-leading) + var(--bubble-top-height) + var(--sp-2));
}
.SingleStep_bottomBubble {
visibility: hidden;
}
.SingleStep_hasBottom .SingleStep_bottomBubble {
visibility: visible;
}
.SingleStep_illustrationBackground,
.SingleStep_illustrationForeground {
left: 0;
pointer-events: none;
position: absolute;
right: 0;
}
.SingleStep_illustrationBackground {
z-index: -1;
}
.SingleStep_illustrationForeground {
z-index: 1;
}
[data-current=getStarted] .SingleStep_topBubble,
[data-current=getStarted] .SingleStep_bottomBubble {
animation:
SingleStep_scale-up 0.9s 0.15s both,
SingleStep_slide-up 0.9s 0.15s both,
SingleStep_fade-in 0.9s 0.15s both;
}
@keyframes SingleStep_scale-up {
0%, 33.33% {
scale: 0.714;
animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);
}
59.26%, 100% {
scale: 1;
}
}
@keyframes SingleStep_fade-in {
0%, 33.33% {
opacity: 0;
}
33.34%, 100% {
opacity: 1;
}
}
@keyframes SingleStep_slide-up {
0%, 40.74% {
translate: 0 38px;
animation-timing-function: cubic-bezier(0.66, 0.00, 0.34, 1.00);
}
77.78%, 100% {
translate: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
[data-current=getStarted] .SingleStep_topBubble,
[data-current=getStarted] .SingleStep_bottomBubble {
animation: none;
}
}