@charset "UTF-8";* {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --text-size-base: 13px;
  --text-size-ratio: 1.15;
  --text-size-h1: calc(var(--text-size-h2) * var(--text-size-ratio));
  --text-size-h2: calc(var(--text-size-h3) * var(--text-size-ratio));
  --text-size-h3: calc(var(--text-size-h4) * var(--text-size-ratio));
  --text-size-h4: calc(var(--text-size-subtitle) * var(--text-size-ratio));
  --text-size-subtitle: calc(var(--text-size-body) * var(--text-size-ratio));
  --text-size-body: calc(1rem * var(--scale-ratio-text-size));
  --text-size-caption1: calc(var(--text-size-body) / var(--text-size-ratio));
  --text-size-caption2: calc(var(--text-size-caption1) / var(--text-size-ratio));
  --text-size-overline: calc(var(--text-size-caption2) / var(--text-size-ratio));
  --text-size-code: 12px;
}

html {
  font-size: var(--text-size-base);
}

@font-face {
  font-family: "inter";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/inter-regular-DJOZHnwz.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "inter";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/inter-medium-oHczPpWt.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "inter";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/inter-semibold-BHlX_6qk.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "inter";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/inter-bold-2PT7Q-hu.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "jetbrains-mono";
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  src: url("/assets/jetbrains-mono-variable-DgTxpPXt.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "roboto-mono";
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  src: url("/assets/roboto-mono-variable-font-Be6w_Krw.ttf") format("truetype");
  font-display: swap;
}
.font-weight-400 {
  font-weight: 400;
}

.font-weight-500 {
  font-weight: 500;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-700 {
  font-weight: 700;
}

.h1 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-h1);
  line-height: 1.38;
  vertical-align: baseline;
}

.h2 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-h2);
  line-height: 1.58;
  vertical-align: baseline;
}

.h3 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-h3);
  line-height: 1.52;
  vertical-align: baseline;
}

.h4 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-h4);
  line-height: 1.75;
  vertical-align: baseline;
}

.subtitle {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-subtitle);
  line-height: 1.385;
  vertical-align: baseline;
}

.body {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-body);
  line-height: 1.385;
  vertical-align: baseline;
}

.caption1 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-caption1);
  line-height: 1.385;
  vertical-align: baseline;
}

.caption2 {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-caption2);
  line-height: 1.385;
  vertical-align: baseline;
}

.overline {
  font-family: "inter", sans-serif;
  font-size: var(--text-size-overline);
  line-height: 1.385;
  vertical-align: baseline;
}

.code {
  font-family: "jetbrains-mono", sans-serif;
  font-size: var(--text-size-code);
  line-height: 1.5;
  vertical-align: baseline;
}

.caption1.font-wight-500 {
  letter-spacing: 0.057px;
}

.caption1.font-wight-600 {
  letter-spacing: 0.075px;
}

.caption1.font-wight-700 {
  letter-spacing: 0.085px;
}

.caption2.font-wight-500 {
  letter-spacing: 0.147px;
}

.caption2.font-wight-600 {
  letter-spacing: 0.197px;
}

.caption2.font-wight-700 {
  letter-spacing: 0.246px;
}

.overline.font-wight-500 {
  letter-spacing: 0.257px;
}

.overline.font-wight-600 {
  letter-spacing: 0.257px;
}

.overline.font-wight-700 {
  letter-spacing: 0.257px;
}@font-face {
  font-family: "Helvetica Now Display";
  src: url("/fonts/helvetica-now-display-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("/fonts/helvetica-now-text-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.drt-body {
  font-family: "Helvetica Now Text", sans-serif;
  font-size: 15px;
  font-style: normal;
  line-height: 1.45;
}

.drt-h1 {
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 63.75px;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.638px;
  font-optical-sizing: auto;
}

.drt-h3 {
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 24.5px;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: 0.245px;
  font-optical-sizing: auto;
}
/* Box sizing rules */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* Remove default margin and padding */
/* Blocks */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

/* List */
ul {
  list-style: none;
}

/* Form */
button, input, select, textarea {
  margin: 0;
  font: inherit;
}

/* Media */
img, video {
  height: auto;
  max-width: 100%;
}

/* Iframe */
iframe {
  border: 0;
}

/* Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}
td:not([align]), th:not([align]) {
  text-align: inherit;
}

:root {
  color-scheme: light dark;
}

[data-theme=light] {
  --color-emphasis-high: rgba(17, 16, 16, 0.88);
  --color-emphasis-medium: rgba(13, 12, 12, 0.64);
  --color-emphasis-low: rgba(15, 14, 14, 0.42);
  --color-emphasis-24: rgba(4, 3, 3, 0.24);
  --color-emphasis-12: rgba(4, 3, 3, 0.12);
  --color-emphasis-08: rgba(4, 3, 3, 0.08);
  --color-emphasis-04: rgba(4, 3, 3, 0.05);
  --color-emphasis-02: rgba(4, 3, 3, 0.03);
  --color-emphasis-01: rgba(4, 3, 3, 0.02);
  --color-invert-high: rgba(252, 253, 254, 0.96);
  --color-invert-medium: rgba(236, 237, 238, 0.64);
  --color-invert-low: rgba(205, 206, 207, 0.45);
  --color-invert-24: rgba(206, 207, 208, 0.24);
  --color-invert-12: rgba(0, 0, 1, 0.44);
  --color-invert-08: rgba(0, 0, 1, 0.33);
  --color-invert-04: rgba(0, 0, 1, 0.21);
  --color-invert-02: rgba(0, 0, 1, 0.11);
  --color-invert-01: rgba(0, 0, 1, 0.04);
  --color-primary-high: rgba(33, 113, 206, 1.00);
  --color-primary-medium: rgba(54, 139, 237, 1.00);
  --color-primary-low: rgba(104, 164, 233, 1.00);
  --color-primary-24: rgba(165, 202, 243, 1.00);
  --color-primary-12: rgba(55, 141, 240, 0.21);
  --color-primary-08: rgba(55, 141, 240, 0.13);
  --color-secondary-high: rgba(252, 151, 18, 1.00);
  --color-secondary-medium: rgba(255, 175, 36, 0.90);
  --color-secondary-12: rgba(255, 166, 0, 0.21);
  --color-secondary-08: rgba(255, 166, 0, 0.13);
  --color-background-0: rgba(255, 254, 254, 1.00);
  --color-background-1: rgba(247, 246, 246, 1.00);
  --color-background-2: rgba(242, 241, 241, 1.00);
  --color-background-3: rgba(235, 234, 234, 1.00);
  --color-background-4: rgba(225, 224, 224, 1.00);
  --color-background-5: rgba(218, 217, 217, 1.00);
  --color-background-invert-0: rgba(37, 37, 38, 1.00);
  --color-background-invert-1: rgba(33, 33, 34, 1.00);
  --color-background-invert-2: rgba(29, 29, 30, 1.00);
  --color-background-invert-3: rgba(25, 25, 26, 1.00);
  --color-background-invert-4: rgba(21, 21, 22, 1.00);
  --color-background-invert-5: rgba(17, 17, 18, 1.00);
  --color-success: rgba(42, 169, 75, 1.00);
  --color-error: rgba(224, 48, 51, 1.00);
  --color-warning: rgba(219, 119, 4, 1.00);
  --color-highlights-orange: rgba(255, 206, 71, 1);
  --color-highlights-green: rgba(115, 229, 48, 1);
  --color-highlights-cyan: rgba(0, 215, 235, 1);
  --color-highlights-blue: rgba(0, 176, 235, 1);
  --color-highlights-purple: rgba(142, 134, 255, 1);
  --color-highlights-pink: rgba(222, 151, 255, 1);
  --color-highlights-red: rgba(255, 134, 152, 1);
  --color-elevations-ds0: rgba(0, 0, 0, 0.08);
  --color-elevations-ds1: rgba(0, 0, 0, 0.06);
  --color-elevations-ds2: rgba(0, 0, 0, 0.07);
  --color-elevations-ds3: rgba(0, 0, 0, 0.09);
  --color-elevations-ds4: rgba(0, 0, 0, 0.10);
  --color-elevations-is0: rgba(255, 255, 255, 0.10);
  --color-elevations-dp0: rgba(0, 0, 0, 0.03);
  --color-elevations-dp1: rgba(0, 0, 0, 0.06);
}

[data-theme=dark] {
  --color-emphasis-high: rgba(252, 253, 254, 0.96);
  --color-emphasis-medium: rgba(236, 237, 238, 0.64);
  --color-emphasis-low: rgba(205, 206, 207, 0.45);
  --color-emphasis-24: rgba(206, 207, 208, 0.24);
  --color-emphasis-12: rgba(0, 0, 1, 0.44);
  --color-emphasis-08: rgba(0, 0, 1, 0.33);
  --color-emphasis-04: rgba(0, 0, 1, 0.21);
  --color-emphasis-02: rgba(0, 0, 1, 0.11);
  --color-emphasis-01: rgba(0, 0, 1, 0.04);
  --color-invert-high: rgba(17, 16, 16, 0.88);
  --color-invert-medium: rgba(13, 12, 12, 0.64);
  --color-invert-low: rgba(15, 14, 14, 0.42);
  --color-invert-24: rgba(4, 3, 3, 0.24);
  --color-invert-12: rgba(4, 3, 3, 0.12);
  --color-invert-08: rgba(4, 3, 3, 0.08);
  --color-invert-04: rgba(4, 3, 3, 0.05);
  --color-invert-02: rgba(4, 3, 3, 0.03);
  --color-invert-01: rgba(4, 3, 3, 0.02);
  --color-primary-high: rgba(61, 190, 255, 1.00);
  --color-primary-medium: rgba(0, 136, 204, 1.00);
  --color-primary-low: rgba(0, 85, 128, 1.00);
  --color-primary-24: rgba(0, 51, 77, 1.00);
  --color-primary-12: rgba(0, 24, 36, 1.00);
  --color-primary-08: rgba(0, 10, 15, 1.00);
  --color-secondary-high: rgba(255, 200, 89, 1.00);
  --color-secondary-medium: rgba(240, 159, 19, 0.92);
  --color-secondary-12: rgba(250, 169, 40, 0.18);
  --color-secondary-08: rgba(250, 169, 40, 0.11);
  --color-background-0: rgba(37, 37, 38, 1.00);
  --color-background-1: rgba(33, 33, 34, 1.00);
  --color-background-2: rgba(29, 29, 30, 1.00);
  --color-background-3: rgba(25, 25, 26, 1.00);
  --color-background-4: rgba(21, 21, 22, 1.00);
  --color-background-5: rgba(17, 17, 18, 1.00);
  --color-background-invert-0: rgba(255, 254, 254, 1.00);
  --color-background-invert-1: rgba(247, 246, 246, 1.00);
  --color-background-invert-2: rgba(242, 241, 241, 1.00);
  --color-background-invert-3: rgba(235, 234, 234, 1.00);
  --color-background-invert-4: rgba(225, 224, 224, 1.00);
  --color-background-invert-5: rgba(218, 217, 217, 1.00);
  --color-success: rgba(101, 224, 123, 1.00);
  --color-error: rgba(255, 116, 114, 1.00);
  --color-warning: rgba(255, 195, 129, 1.00);
  --color-highlights-orange: rgba(165, 93, 0, 1);
  --color-highlights-green: rgba(28, 138, 0, 1);
  --color-highlights-cyan: rgba(0, 120, 150, 1);
  --color-highlights-blue: rgba(20, 87, 203, 1);
  --color-highlights-purple: rgba(97, 44, 204, 1);
  --color-highlights-pink: rgba(168, 0, 148, 1);
  --color-highlights-red: rgba(217, 65, 65, 1);
  --color-elevations-ds0: rgba(0, 0, 0, 0.64);
  --color-elevations-ds1: rgba(0, 0, 0, 0.24);
  --color-elevations-ds2: rgba(0, 0, 0, 0.24);
  --color-elevations-ds3: rgba(0, 0, 0, 0.24);
  --color-elevations-ds4: rgba(0, 0, 0, 0.24);
  --color-elevations-is0: rgba(255, 255, 255, 0.04);
  --color-elevations-dp0: rgba(0, 0, 0, 0.12);
  --color-elevations-dp1: rgba(0, 0, 0, 0.18);
}
[data-theme=dark] img.icon, [data-theme=dark] svg.logo {
  filter: invert(1);
}

@media (prefers-color-scheme: light) {
  [data-theme=system] {
    --color-emphasis-high: rgba(17, 16, 16, 0.88);
    --color-emphasis-medium: rgba(13, 12, 12, 0.64);
    --color-emphasis-low: rgba(15, 14, 14, 0.42);
    --color-emphasis-24: rgba(4, 3, 3, 0.24);
    --color-emphasis-12: rgba(4, 3, 3, 0.12);
    --color-emphasis-08: rgba(4, 3, 3, 0.08);
    --color-emphasis-04: rgba(4, 3, 3, 0.05);
    --color-emphasis-02: rgba(4, 3, 3, 0.03);
    --color-emphasis-01: rgba(4, 3, 3, 0.02);
    --color-invert-high: rgba(252, 253, 254, 0.96);
    --color-invert-medium: rgba(236, 237, 238, 0.64);
    --color-invert-low: rgba(205, 206, 207, 0.45);
    --color-invert-24: rgba(206, 207, 208, 0.24);
    --color-invert-12: rgba(0, 0, 1, 0.44);
    --color-invert-08: rgba(0, 0, 1, 0.33);
    --color-invert-04: rgba(0, 0, 1, 0.21);
    --color-invert-02: rgba(0, 0, 1, 0.11);
    --color-invert-01: rgba(0, 0, 1, 0.04);
    --color-primary-high: rgba(33, 113, 206, 1.00);
    --color-primary-medium: rgba(54, 139, 237, 1.00);
    --color-primary-low: rgba(104, 164, 233, 1.00);
    --color-primary-24: rgba(165, 202, 243, 1.00);
    --color-primary-12: rgba(55, 141, 240, 0.21);
    --color-primary-08: rgba(55, 141, 240, 0.13);
    --color-secondary-high: rgba(252, 151, 18, 1.00);
    --color-secondary-medium: rgba(255, 175, 36, 0.90);
    --color-secondary-12: rgba(255, 166, 0, 0.21);
    --color-secondary-08: rgba(255, 166, 0, 0.13);
    --color-background-0: rgba(255, 254, 254, 1.00);
    --color-background-1: rgba(247, 246, 246, 1.00);
    --color-background-2: rgba(242, 241, 241, 1.00);
    --color-background-3: rgba(235, 234, 234, 1.00);
    --color-background-4: rgba(225, 224, 224, 1.00);
    --color-background-5: rgba(218, 217, 217, 1.00);
    --color-background-invert-0: rgba(37, 37, 38, 1.00);
    --color-background-invert-1: rgba(33, 33, 34, 1.00);
    --color-background-invert-2: rgba(29, 29, 30, 1.00);
    --color-background-invert-3: rgba(25, 25, 26, 1.00);
    --color-background-invert-4: rgba(21, 21, 22, 1.00);
    --color-background-invert-5: rgba(17, 17, 18, 1.00);
    --color-success: rgba(42, 169, 75, 1.00);
    --color-error: rgba(224, 48, 51, 1.00);
    --color-warning: rgba(219, 119, 4, 1.00);
    --color-highlights-orange: rgba(255, 206, 71, 1);
    --color-highlights-green: rgba(115, 229, 48, 1);
    --color-highlights-cyan: rgba(0, 215, 235, 1);
    --color-highlights-blue: rgba(0, 176, 235, 1);
    --color-highlights-purple: rgba(142, 134, 255, 1);
    --color-highlights-pink: rgba(222, 151, 255, 1);
    --color-highlights-red: rgba(255, 134, 152, 1);
    --color-elevations-ds0: rgba(0, 0, 0, 0.08);
    --color-elevations-ds1: rgba(0, 0, 0, 0.06);
    --color-elevations-ds2: rgba(0, 0, 0, 0.07);
    --color-elevations-ds3: rgba(0, 0, 0, 0.09);
    --color-elevations-ds4: rgba(0, 0, 0, 0.10);
    --color-elevations-is0: rgba(255, 255, 255, 0.10);
    --color-elevations-dp0: rgba(0, 0, 0, 0.03);
    --color-elevations-dp1: rgba(0, 0, 0, 0.06);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme=system] {
    --color-emphasis-high: rgba(252, 253, 254, 0.96);
    --color-emphasis-medium: rgba(236, 237, 238, 0.64);
    --color-emphasis-low: rgba(205, 206, 207, 0.45);
    --color-emphasis-24: rgba(206, 207, 208, 0.24);
    --color-emphasis-12: rgba(0, 0, 1, 0.44);
    --color-emphasis-08: rgba(0, 0, 1, 0.33);
    --color-emphasis-04: rgba(0, 0, 1, 0.21);
    --color-emphasis-02: rgba(0, 0, 1, 0.11);
    --color-emphasis-01: rgba(0, 0, 1, 0.04);
    --color-invert-high: rgba(17, 16, 16, 0.88);
    --color-invert-medium: rgba(13, 12, 12, 0.64);
    --color-invert-low: rgba(15, 14, 14, 0.42);
    --color-invert-24: rgba(4, 3, 3, 0.24);
    --color-invert-12: rgba(4, 3, 3, 0.12);
    --color-invert-08: rgba(4, 3, 3, 0.08);
    --color-invert-04: rgba(4, 3, 3, 0.05);
    --color-invert-02: rgba(4, 3, 3, 0.03);
    --color-invert-01: rgba(4, 3, 3, 0.02);
    --color-primary-high: rgba(61, 190, 255, 1.00);
    --color-primary-medium: rgba(0, 136, 204, 1.00);
    --color-primary-low: rgba(0, 85, 128, 1.00);
    --color-primary-24: rgba(0, 51, 77, 1.00);
    --color-primary-12: rgba(0, 24, 36, 1.00);
    --color-primary-08: rgba(0, 10, 15, 1.00);
    --color-secondary-high: rgba(255, 200, 89, 1.00);
    --color-secondary-medium: rgba(240, 159, 19, 0.92);
    --color-secondary-12: rgba(250, 169, 40, 0.18);
    --color-secondary-08: rgba(250, 169, 40, 0.11);
    --color-background-0: rgba(37, 37, 38, 1.00);
    --color-background-1: rgba(33, 33, 34, 1.00);
    --color-background-2: rgba(29, 29, 30, 1.00);
    --color-background-3: rgba(25, 25, 26, 1.00);
    --color-background-4: rgba(21, 21, 22, 1.00);
    --color-background-5: rgba(17, 17, 18, 1.00);
    --color-background-invert-0: rgba(255, 254, 254, 1.00);
    --color-background-invert-1: rgba(247, 246, 246, 1.00);
    --color-background-invert-2: rgba(242, 241, 241, 1.00);
    --color-background-invert-3: rgba(235, 234, 234, 1.00);
    --color-background-invert-4: rgba(225, 224, 224, 1.00);
    --color-background-invert-5: rgba(218, 217, 217, 1.00);
    --color-success: rgba(101, 224, 123, 1.00);
    --color-error: rgba(255, 116, 114, 1.00);
    --color-warning: rgba(255, 195, 129, 1.00);
    --color-highlights-orange: rgba(165, 93, 0, 1);
    --color-highlights-green: rgba(28, 138, 0, 1);
    --color-highlights-cyan: rgba(0, 120, 150, 1);
    --color-highlights-blue: rgba(20, 87, 203, 1);
    --color-highlights-purple: rgba(97, 44, 204, 1);
    --color-highlights-pink: rgba(168, 0, 148, 1);
    --color-highlights-red: rgba(217, 65, 65, 1);
    --color-elevations-ds0: rgba(0, 0, 0, 0.64);
    --color-elevations-ds1: rgba(0, 0, 0, 0.24);
    --color-elevations-ds2: rgba(0, 0, 0, 0.24);
    --color-elevations-ds3: rgba(0, 0, 0, 0.24);
    --color-elevations-ds4: rgba(0, 0, 0, 0.24);
    --color-elevations-is0: rgba(255, 255, 255, 0.04);
    --color-elevations-dp0: rgba(0, 0, 0, 0.12);
    --color-elevations-dp1: rgba(0, 0, 0, 0.18);
  }
  [data-theme=system] img.icon, [data-theme=system] svg.logo {
    filter: invert(1);
  }
}

/* Adds px unit to unitless valuess */
.truncate-single-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-multi-line {
  --truncate-line-count: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--truncate-line-clamp, 2);
}

.visibility-none {
  display: none !important;
}
.visibility-hidden {
  visibility: hidden !important;
}

.is-fullwidth {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
}

.is-disable {
  pointer-events: none;
}

:root {
  --scale-value: 1;
  --scale-ratio-margin: calc(((var(--scale-value) - 1) * 1.5) + 1);
  --scale-ratio-margin-inline: var(--scale-ratio-margin);
  --scale-ratio-margin-block: var(--scale-ratio-margin);
  --scale-ratio-margin-inline-start: var(--scale-ratio-margin-inline);
  --scale-ratio-margin-inline-end: var(--scale-ratio-margin-inline);
  --scale-ratio-margin-block-start: var(--scale-ratio-margin-block);
  --scale-ratio-margin-block-end: var(--scale-ratio-margin-block);
  --scale-ratio-gap: var(--scale-ratio-margin);
  --scale-ratio-row-gap: var(--scale-ratio-gap);
  --scale-ratio-column-gap: var(--scale-ratio-gap);
  --scale-ratio-padding: calc(((var(--scale-value) - 1) * 3) + 1);
  --scale-ratio-padding-inline: var(--scale-ratio-padding);
  --scale-ratio-padding-block: var(--scale-ratio-padding);
  --scale-ratio-padding-inline-start: var(--scale-ratio-padding-inline);
  --scale-ratio-padding-inline-end: var(--scale-ratio-padding-inline);
  --scale-ratio-padding-block-start: var(--scale-ratio-padding-block);
  --scale-ratio-padding-block-end: var(--scale-ratio-padding-block);
  --scale-ratio-border-radius: calc(((var(--scale-value) - 1) * 1 / 4) + 1);
  --scale-ratio-border-start-start-radius: var(--scale-ratio-border-radius);
  --scale-ratio-border-start-end-radius: var(--scale-ratio-border-radius);
  --scale-ratio-border-end-end-radius: var(--scale-ratio-border-radius);
  --scale-ratio-border-end-start-radius: var(--scale-ratio-border-radius);
  --scale-ratio-text-size: calc(((var(--scale-value) - 1) * 1 / 4) + 1);
  --scale-ratio-icon-size: calc(((var(--scale-value) - 1) * 1 / 4) + 1);
}

/* The add-scale function should be assigned as values to the margin, padding and boarder-radius properties.*/
.divider {
  --divider-background-color: var(--color-emphasis-08);
  background-color: var(--divider-background-color);
}
.divider.direction-row {
  width: 100%;
  height: 1px;
}
.divider.direction-row.is-small {
  margin-inline: 0 0;
  margin-block: calc(var(--scale-ratio-margin-block-start) * 3px) calc(var(--scale-ratio-margin-block-end) * 3px);
}
.divider.direction-row.is-medium {
  margin-inline: 0 0;
  margin-block: calc(var(--scale-ratio-margin-block-start) * 6px) calc(var(--scale-ratio-margin-block-end) * 6px);
}
.divider.direction-row.is-large {
  margin-inline: 0 0;
  margin-block: calc(var(--scale-ratio-margin-block-start) * 9px) calc(var(--scale-ratio-margin-block-end) * 9px);
}
.divider.direction-column {
  width: 1px;
  height: 100%;
}
.divider.direction-column.is-small {
  margin-inline: calc(var(--scale-ratio-margin-inline-start) * 3px) calc(var(--scale-ratio-margin-inline-end) * 3px);
  margin-block: 0 0;
}
.divider.direction-column.is-medium {
  margin-inline: calc(var(--scale-ratio-margin-inline-start) * 6px) calc(var(--scale-ratio-margin-inline-end) * 6px);
  margin-block: 0 0;
}
.divider.direction-column.is-large {
  margin-inline: calc(var(--scale-ratio-margin-inline-start) * 9px) calc(var(--scale-ratio-margin-inline-end) * 9px);
  margin-block: 0 0;
}

.text {
  --text-text-color: var(--color-emphasis-high);
  margin: 0;
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 3px) calc(var(--scale-ratio-padding-inline-end) * 3px);
  padding-block: 0 0;
  color: var(--text-text-color);
}
.text.is-bold {
  font-weight: bold;
}
.text.is-italic {
  font-style: italic;
}
.text.is-underline {
  text-decoration: underline;
}

h1.text, h2.text, h3.text, h4.text, h5.text, h6.text {
  --text-text-color: var(--color-emphasis-medium);
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 3px) calc(var(--scale-ratio-padding-inline-end) * 3px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 1px) calc(var(--scale-ratio-padding-block-end) * 2px);
}

:root {
  --effect-depth-0: none;
  --effect-depth-1: 0 0 0 1px var(--color-elevations-dp0, rgba(0, 0, 0, 0.03)) inset, 0 1px 1px 0 var(--color-elevations-dp1, rgba(0, 0, 0, 0.06)) inset;
  --effect-elevation-0: none;
  --effect-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --effect-elevation-2: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0  0.66px 2px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 0.33px 1px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 0.165px 0.5px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 0.083px 0.25px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 0.5px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-4: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 1.32px 4px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 0.66px 2px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 0.33px 1px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 0.165px 0.5px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-8: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 2.64px 8px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 1.32px 4px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 0.66px 2px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 0.33px 1px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-16: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 5.28px 16px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 2.64px 8px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 1.32px 4px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 0.66px 2px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-24: 0 0 2px 0 rgba(10, 26, 26, 0.32), 0 12px 24px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --effect-elevation-32: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 10.56px 32px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 5.28px 16px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 2.64px 8px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 1.32px 4px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-48: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 15.84px 48px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 7.92px 24px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 3.96px 12px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 1.98px 6px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
  --effect-elevation-64: 0 1px 0 0 var(--color-elevations-is0, rgba(255, 255, 255, 0.10)) inset, 0 21.2px 64px 0 var(--color-elevations-ds4, rgba(0, 0, 0, 0.10)), 0 10.56px 32px 0 var(--color-elevations-ds3, rgba(0, 0, 0, 0.09)), 0 5.28px 16px 0 var(--color-elevations-ds2, rgba(0, 0, 0, 0.07)), 0 2.64px 8px 0 var(--color-elevations-ds1, rgba(0, 0, 0, 0.06)), 0 0 0 1px var(--color-elevations-ds0, rgba(0, 0, 0, 0.08));
}

.button {
  --button-text-color: unset;
  --button-icon-color: unset;
  --button-background-color: unset;
  --button-hover-color: unset;
  --button-active-color: unset;
  background-color: var(--button-background-color);
  border: none;
  box-shadow: var(--effect-elevation-4);
  border-start-start-radius: calc(var(--scale-ratio-border-start-start-radius) * 6px);
  border-start-end-radius: calc(var(--scale-ratio-border-start-end-radius) * 6px);
  border-end-end-radius: calc(var(--scale-ratio-border-end-end-radius) * 6px);
  border-end-start-radius: calc(var(--scale-ratio-border-end-start-radius) * 6px);
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 6px) calc(var(--scale-ratio-padding-inline-end) * 6px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 3px) calc(var(--scale-ratio-padding-block-end) * 3px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
}
.button::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: inherit;
}
.button:not(.no-hover):hover::before, .button:not(.no-hover).is-hovered::before {
  background-color: var(--button-hover-color);
}
.button:not(.no-active):active, .button:not(.no-active).is-pressed {
  box-shadow: var(--effect-depth-1);
}
.button:not(.no-active):active::before, .button:not(.no-active).is-pressed::before {
  background-color: var(--button-active-color);
}
.button .text, .button .material-icons-svg, .button .icon, .button svg {
  position: inherit;
  z-index: 1;
  color: var(--button-text-color);
  fill: var(--button-icon-color);
}
.button .text:empty, .button .material-icons-svg:empty, .button .icon:empty, .button svg:empty {
  display: none;
}
.button.is-primary {
  --button-text-color: var(--color-invert-high);
  --button-icon-color: var(--color-invert-high);
  --button-background-color: var(--color-primary-high);
  --button-hover-color: var(--color-emphasis-12);
  --button-active-color: var(--color-emphasis-24);
}
.button.is-secondary {
  --button-text-color: var(--color-emphasis-high);
  --button-icon-color: var(--color-emphasis-high);
  --button-background-color: var(--color-background-0);
  --button-hover-color: var(--color-emphasis-08);
  --button-active-color: var(--color-emphasis-12);
}
.button.is-ghost {
  --button-text-color: var(--color-emphasis-medium);
  --button-icon-color: var(--color-emphasis-medium);
  --button-background-color: transparent;
  --button-hover-color: var(--color-emphasis-04);
  --button-active-color: var(--color-emphasis-08);
  box-shadow: none;
}
.button.is-ghost:disabled, .button.is-ghost.is-disable {
  --button-background-color: transparent;
}
.button.direction-row {
  flex-direction: row;
}
.button.direction-column {
  flex-direction: column;
  align-items: center;
}
.button:disabled, .button.is-disable {
  --button-text-color: var(--color-emphasis-24);
  --button-icon-color: var(--color-emphasis-24);
  --button-background-color: var(--color-emphasis-08);
  --button-hover-color: transparent;
  --button-active-color: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

#app > *:not(.json-viewer-app) .button {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 9px) calc(var(--scale-ratio-padding-inline-end) * 9px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 6px) calc(var(--scale-ratio-padding-block-end) * 6px);
}
#app > *:not(.json-viewer-app) .button.is-primary {
  --button-background-color: var(--color-emphasis-high);
  --button-text-color: var(--color-invert-high);
}
#app > *:not(.json-viewer-app) .segmented-button {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 11px) calc(var(--scale-ratio-padding-inline-end) * 11px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 4px) calc(var(--scale-ratio-padding-block-end) * 4px);
}
#app > *:not(.json-viewer-app) .layout-control {
  gap: calc(var(--scale-ratio-row-gap) * 15px) calc(var(--scale-ratio-column-gap) * 15px);
  justify-content: flex-end;
}
#app > *:not(.json-viewer-app) .layout-control [class*=layout-input] {
  max-height: 28px;
}
#app > *:not(.json-viewer-app) .layout-control [class*=layout-input] .password-input, #app > *:not(.json-viewer-app) .layout-control [class*=layout-input] .text-input {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 7px) calc(var(--scale-ratio-padding-inline-end) * 7px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 4px) calc(var(--scale-ratio-padding-block-end) * 4px);
}
#app > *:not(.json-viewer-app) .layout-control [class*=layout-input] .clear-button {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 6px) calc(var(--scale-ratio-padding-inline-end) * 6px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 6px) calc(var(--scale-ratio-padding-block-end) * 6px);
}

.main-menu {
  --menu-link-hover-color: rgba(255, 255, 255, 0.1);
  --menu-link-active-color: rgba(255, 255, 255, 0.05);
  display: flex;
  gap: calc(var(--scale-ratio-row-gap) * 3px) calc(var(--scale-ratio-column-gap) * 3px);
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 3px) calc(var(--scale-ratio-padding-inline-end) * 3px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 3px) calc(var(--scale-ratio-padding-block-end) * 3px);
  background: var(--color-background-invert-4);
}
.main-menu:not(.is-visible) {
  display: none;
}

.menu-link {
  flex: 1 7 0;
  background: var(--color-background-invert-1);
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale-ratio-row-gap) * 12px) calc(var(--scale-ratio-column-gap) * 12px);
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 18px) calc(var(--scale-ratio-padding-inline-end) * 18px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 10px) calc(var(--scale-ratio-padding-block-end) * 10px);
  border-start-start-radius: calc(var(--scale-ratio-border-start-start-radius) * 4px);
  border-start-end-radius: calc(var(--scale-ratio-border-start-end-radius) * 4px);
  border-end-end-radius: calc(var(--scale-ratio-border-end-end-radius) * 4px);
  border-end-start-radius: calc(var(--scale-ratio-border-end-start-radius) * 4px);
  position: relative;
  text-decoration: none;
}
.menu-link::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: inherit;
  transition: background 75ms ease-in-out;
}
.menu-link:hover::before {
  background: var(--menu-link-hover-color);
}
.menu-link:not(:has(.link:active)):active::before {
  background: var(--menu-link-active-color);
}
.menu-link .title {
  padding: 0;
  display: block;
  color: var(--color-invert-high);
  z-index: 1;
}
.menu-link.group {
  flex: 2 7 0;
}
.menu-link.group .links-section {
  margin: auto 0 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale-ratio-row-gap) * 2px) calc(var(--scale-ratio-column-gap) * 2px);
}
.menu-link.group .links-section .link {
  display: block;
  text-decoration: none;
  border-start-start-radius: calc(var(--scale-ratio-border-start-start-radius) * 6px);
  border-start-end-radius: calc(var(--scale-ratio-border-start-end-radius) * 6px);
  border-end-end-radius: calc(var(--scale-ratio-border-end-end-radius) * 6px);
  border-end-start-radius: calc(var(--scale-ratio-border-end-start-radius) * 6px);
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 6px) calc(var(--scale-ratio-padding-inline-end) * 6px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 1px) calc(var(--scale-ratio-padding-block-end) * 1px);
  transition: background 75ms ease-in-out;
  position: relative;
}
.menu-link.group .links-section .link .text {
  padding: 0;
  color: var(--color-invert-medium);
}
.menu-link.group .links-section .link::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.menu-link.group .links-section .link::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  content: attr(data-content);
  padding: inherit;
  opacity: 0.42;
  color: var(--color-invert-high);
}
.menu-link.group .links-section .link:hover {
  background: var(--menu-link-hover-color);
}
.menu-link.group .links-section .link:active {
  background: var(--color-background-invert-1);
}
.menu-link.group .links-section .link:active:before {
  --strip-color: rgba(67, 86, 96, 0.12);
  --strip-blur: 1.5px;
  background: repeating-linear-gradient(90deg, var(--strip-color), var(--strip-color) 1px, transparent 1px, transparent 2px);
  -webkit-mask-image: repeating-linear-gradient(90deg, white, white 1px, transparent 1px, transparent 2px);
          mask-image: repeating-linear-gradient(90deg, white, white 1px, transparent 1px, transparent 2px);
  -webkit-backdrop-filter: blur(var(--strip-blur));
          backdrop-filter: blur(var(--strip-blur));
  border-radius: inherit;
}
.menu-link.group .links-section .link:hover .text, .menu-link.group .links-section .link:active .text {
  color: var(--color-invert-high);
}

.navigation.dadroit .brand-block {
  display: flex;
  justify-content: center;
  padding-inline: 0 0;
  padding-block: calc(var(--scale-ratio-padding-block-start) * 18px) calc(var(--scale-ratio-padding-block-end) * 6px);
}
.navigation.dadroit .navigation {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 15px) calc(var(--scale-ratio-padding-inline-end) * 15px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 15px) calc(var(--scale-ratio-padding-block-end) * 15px);
  display: flex;
  justify-content: center;
  gap: calc(var(--scale-ratio-row-gap) * 1px) calc(var(--scale-ratio-column-gap) * 1px);
}
.navigation.dadroit .navigation-link {
  text-decoration: none;
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 6px) calc(var(--scale-ratio-padding-inline-end) * 6px);
  padding-block: calc(var(--scale-ratio-padding-block-start) * 3px) calc(var(--scale-ratio-padding-block-end) * 3px);
}
.navigation.dadroit .navigation-link .text {
  --text-text-color: var(--color-emphasis-high);
}
.navigation.dadroit .navigation-link.is-active .text {
  --text-text-color: var(--color-emphasis-low);
}
.navigation.dadroit.v-web .brand-block {
  padding-inline: 0 0;
  padding-block: calc(var(--scale-ratio-padding-block-start) * 18px) calc(var(--scale-ratio-padding-block-end) * 18px);
}

.footer {
  border-top: 1px solid var(--color-emphasis-08);
  padding-inline: 0 0;
  padding-block: calc(var(--scale-ratio-padding-block-start) * 42px) 0;
}
.footer .link-wrapper {
  display: flex;
  gap: calc(var(--scale-ratio-row-gap) * 32px) calc(var(--scale-ratio-column-gap) * 32px);
  padding-inline: 0 0;
  padding-block: 0 calc(var(--scale-ratio-padding-block-end) * 40px);
  justify-self: center;
}
.footer .link-wrapper .link-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--scale-ratio-row-gap) * 4px) calc(var(--scale-ratio-column-gap) * 4px);
}
.footer .link-wrapper .link-block .link {
  color: var(--color-emphasis-high);
  text-decoration: none;
  font-size: 15px;
  line-height: 21.75px;
}
.footer .footer-brand {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: calc(var(--scale-ratio-row-gap) * 6px) calc(var(--scale-ratio-column-gap) * 6px);
  padding-inline: 0 0;
  padding-block: calc(var(--scale-ratio-padding-block-start) * 15px) calc(var(--scale-ratio-padding-block-end) * 15px);
  color: var(--color-emphasis-low);
}
.footer .footer-brand .logo-link {
  padding-inline: calc(var(--scale-ratio-padding-inline-start) * 3px) calc(var(--scale-ratio-padding-inline-end) * 3px);
  padding-block: 0 0;
}
.footer .footer-brand .copy-right {
  color: var(--color-emphasis-low);
  font-size: 12px;
  font-weight: 460;
  letter-spacing: 0.06px;
}
.footer .link-wrapper, .footer .footer-brand {
  width: 100%;
  max-width: 944px;
  min-width: 320px;
  margin: 0 auto;
}

/*
⚠️ WARNING: Development-only styles!
This stylesheet is intended to improve Developer Experience (DX) during development.
DO NOT include this file in production builds.
Remove or exclude via build config before deploying to production.
*/
#app .navbar {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 4px;
  padding: 9px;
  background: var(--color-emphasis-medium);
  position: absolute;
  visibility: visible;
  inset: 0 auto 0 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  margin: 0;
  opacity: 0;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  transform: translate(-95%, 0);
}
#app .navbar a {
  text-decoration: none;
  margin: 0;
  padding: 4px 6px;
  border-radius: 6px;
}
#app .navbar a .text {
  color: var(--color-invert-medium);
}
#app .navbar a:hover {
  background-color: var(--color-emphasis-24);
}
#app .navbar a:hover .text {
  color: var(--color-invert-high);
}
#app .navbar a:active, #app .navbar a.active {
  background-color: var(--color-emphasis-low);
}
#app .navbar a:active .text, #app .navbar a.active .text {
  color: var(--color-invert-high);
}
#app .navbar:hover {
  opacity: 1;
  transform: translate(0, 0);
}

:root {
  --text-size-base: 15px;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#app > * {
  flex: 1 1 0;
}
#app .main-menu, #app .navigation, #app .footer {
  flex: 0;
}