@property --tasty-second-fill-color { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --current-color { syntax: "<color>"; inherits: true; initial-value: currentcolor; }
@property --white-color { syntax: "<color>"; inherits: true; initial-value: rgb(255 255 255); }
@property --black-color { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }
@property --clear-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --border-color { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }
@property --gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
@property --radius { syntax: "<length>"; inherits: true; initial-value: 6px; }
@property --border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --outline-width { syntax: "<length>"; inherits: true; initial-value: 3px; }
@property --transition { syntax: "<time>"; inherits: true; initial-value: 80ms; }
@property --sharp-radius { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --bold-font-weight { syntax: "<number>"; inherits: true; initial-value: 700; }
@property --font-sans-fallback { syntax: "*"; inherits: true; initial-value: system-ui, -apple-system, "segoe ui", roboto, helvetica, arial, "apple color emoji", "segoe ui emoji", sans-serif; }
@property --font-mono-fallback { syntax: "*"; inherits: true; initial-value: ui-monospace, sfmono-regular, menlo, monaco, consolas, "liberation mono", "courier new", monospace; }
@property --current-color { syntax: "<color>"; inherits: true; initial-value: transparent; }

    @view-transition {
      navigation: auto;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img { max-width: 100%; height: auto; display: block; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  
:root:has(input[name="hue"][value="10"]:checked){--primary-hue:10;}
:root:has(input[name="hue"][value="30"]:checked){--primary-hue:30;}
:root:has(input[name="hue"][value="50"]:checked){--primary-hue:50;}
:root:has(input[name="hue"][value="70"]:checked){--primary-hue:70;}
:root:has(input[name="hue"][value="90"]:checked){--primary-hue:90;}
:root:has(input[name="hue"][value="110"]:checked){--primary-hue:110;}
:root:has(input[name="hue"][value="130"]:checked){--primary-hue:130;}
:root:has(input[name="hue"][value="150"]:checked){--primary-hue:150;}
:root:has(input[name="hue"][value="170"]:checked){--primary-hue:170;}
:root:has(input[name="hue"][value="190"]:checked){--primary-hue:190;}
:root:has(input[name="hue"][value="210"]:checked){--primary-hue:210;}
:root:has(input[name="hue"][value="230"]:checked){--primary-hue:230;}
:root:has(input[name="hue"][value="250"]:checked){--primary-hue:250;}
:root:has(input[name="hue"][value="270"]:checked){--primary-hue:270;}
:root:has(input[name="hue"][value="290"]:checked){--primary-hue:290;}
:root:has(input[name="hue"][value="310"]:checked){--primary-hue:310;}
:root:has(input[name="hue"][value="330"]:checked){--primary-hue:330;}
:root:has(input[name="hue"][value="350"]:checked){--primary-hue:350;}
:root { --gap: 8px; --radius: 6px; --card-radius: 12px; --max-width: 720px; --font: "onest", system-ui, -apple-system, sans-serif; --monospace-font: "source code pro", ui-monospace, monospace; --default-font-size: 16px; --default-line-height: 1.5; --default-font-weight: 400; --h1-font-size: 32px; --h1-line-height: 1.2; --h1-letter-spacing: -0.02em; --h1-font-weight: 700; --h1-bold-font-weight: 700; --h2-font-size: 24px; --h2-line-height: 1.3; --h2-letter-spacing: -0.01em; --h2-font-weight: 700; --h2-bold-font-weight: 700; --h3-font-size: 20px; --h3-line-height: 1.4; --h3-letter-spacing: normal; --h3-font-weight: 700; --h3-bold-font-weight: 700; --t1-font-size: 18px; --t1-line-height: 1.6; --t1-letter-spacing: normal; --t1-font-weight: 400; --t1-bold-font-weight: 600; --t2-font-size: 16px; --t2-line-height: 1.5; --t2-letter-spacing: normal; --t2-font-weight: 400; --t2-bold-font-weight: 600; --t3-font-size: 13px; --t3-line-height: 1.5; --t3-letter-spacing: normal; --t3-font-weight: 400; --t3-bold-font-weight: 600; --nav-font-size: 15px; --nav-line-height: 1.4; --nav-letter-spacing: normal; --nav-font-weight: 400; --nav-bold-font-weight: 600; --code-font-size: 14px; --code-line-height: 1.5; --code-letter-spacing: normal; --code-font-weight: 500; --code-bold-font-weight: 600; --code-font-family: "source code pro", ui-monospace, monospace; --label-font-size: 13px; --label-line-height: 1.4; --label-letter-spacing: normal; --label-font-weight: 600; --label-bold-font-weight: 700; --overline-font-size: 12px; --overline-line-height: 1.4; --overline-letter-spacing: 0.06em; --overline-font-weight: 600; --overline-bold-font-weight: 700; --overline-text-transform: uppercase; --primary-hue: 210; --scrollbar-thumb-color: var(--border-color); --scrollbar-track-color: oklch(from var(--border-color) l c h / .4); }
@media (not (prefers-color-scheme: dark)) { :root:where(:not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-color: oklch(1 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-glass-border-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-text-color: oklch(1 0 var(--primary-hue)); --primary-shadow-color: oklch(0.3015 0 0 / 0.0736); --primary-small-shadow-color: oklch(0.3015 0 0 / 0.2185); --surface-color: oklch(1 0 var(--primary-hue)); --surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --glass-border-color: oklch(1 0 var(--primary-hue)); --accent-surface-text-color: oklch(1 0 var(--primary-hue)); --shadow-color: oklch(0.3015 0 0 / 0.0736); --small-shadow-color: oklch(0.3015 0 0 / 0.2185); --syntax-bg-color: oklch(1 0 0); } }
@media (prefers-color-scheme: dark) { :root:where(:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) { --primary-surface-color: oklch(1 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-glass-border-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-text-color: oklch(1 0 var(--primary-hue)); --primary-shadow-color: oklch(0.3015 0 0 / 0.0736); --primary-small-shadow-color: oklch(0.3015 0 0 / 0.2185); --surface-color: oklch(1 0 var(--primary-hue)); --surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --glass-border-color: oklch(1 0 var(--primary-hue)); --accent-surface-text-color: oklch(1 0 var(--primary-hue)); --shadow-color: oklch(0.3015 0 0 / 0.0736); --small-shadow-color: oklch(0.3015 0 0 / 0.2185); --syntax-bg-color: oklch(1 0 0); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-text-color: oklch(0.201 0.0014 var(--primary-hue)); --primary-text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --primary-border-color: oklch(0.8504 0.0154 var(--primary-hue)); --primary-accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --primary-tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --text-color: oklch(0.201 0.0014 var(--primary-hue)); --text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --border-color: oklch(0.8504 0.0154 var(--primary-hue)); --accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --syntax-text-color: oklch(0.201 0 0); --syntax-comment-color: oklch(0.644 0.0017 210); --syntax-punctuation-color: oklch(0.644 0.0017 210); --syntax-keyword-color: oklch(0.6348 0.0796 210); --syntax-string-color: oklch(0.6551 0.1033 15); --syntax-token-color: oklch(0.6374 0.0873 125); --syntax-property-color: oklch(0.6337 0.0823 155); --syntax-number-color: oklch(0.6473 0.0892 70); --syntax-function-color: oklch(0.636 0.0706 210); --syntax-value-color: oklch(0.6367 0.0657 210); --syntax-operator-color: oklch(0.6558 0.1004 340); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-text-color: oklch(0.201 0.0014 var(--primary-hue)); --primary-text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --primary-border-color: oklch(0.8504 0.0154 var(--primary-hue)); --primary-accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --primary-tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --text-color: oklch(0.201 0.0014 var(--primary-hue)); --text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --border-color: oklch(0.8504 0.0154 var(--primary-hue)); --accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --syntax-text-color: oklch(0.201 0 0); --syntax-comment-color: oklch(0.644 0.0017 210); --syntax-punctuation-color: oklch(0.644 0.0017 210); --syntax-keyword-color: oklch(0.6348 0.0796 210); --syntax-string-color: oklch(0.6551 0.1033 15); --syntax-token-color: oklch(0.6374 0.0873 125); --syntax-property-color: oklch(0.6337 0.0823 155); --syntax-number-color: oklch(0.6473 0.0892 70); --syntax-function-color: oklch(0.636 0.0706 210); --syntax-value-color: oklch(0.6367 0.0657 210); --syntax-operator-color: oklch(0.6558 0.1004 340); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) { --primary-surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-text-color: oklch(0.201 0.0014 var(--primary-hue)); --primary-text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --primary-border-color: oklch(0.8504 0.0154 var(--primary-hue)); --primary-accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --primary-tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --text-color: oklch(0.201 0.0014 var(--primary-hue)); --text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --border-color: oklch(0.8504 0.0154 var(--primary-hue)); --accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --syntax-text-color: oklch(0.201 0 0); --syntax-comment-color: oklch(0.644 0.0017 210); --syntax-punctuation-color: oklch(0.644 0.0017 210); --syntax-keyword-color: oklch(0.6348 0.0796 210); --syntax-string-color: oklch(0.6551 0.1033 15); --syntax-token-color: oklch(0.6374 0.0873 125); --syntax-property-color: oklch(0.6337 0.0823 155); --syntax-number-color: oklch(0.6473 0.0892 70); --syntax-function-color: oklch(0.636 0.0706 210); --syntax-value-color: oklch(0.6367 0.0657 210); --syntax-operator-color: oklch(0.6558 0.1004 340); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) { --primary-surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --primary-text-color: oklch(0.201 0.0014 var(--primary-hue)); --primary-text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --primary-border-color: oklch(0.8504 0.0154 var(--primary-hue)); --primary-accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --primary-tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --surface-down-color: oklch(0.8047 0.0082 var(--primary-hue)); --surface-topbar-color: oklch(0.9581 0.0017 var(--primary-hue)); --text-color: oklch(0.201 0.0014 var(--primary-hue)); --text-soft-color: oklch(0.3772 0.0018 var(--primary-hue)); --border-color: oklch(0.8504 0.0154 var(--primary-hue)); --accent-text-color: oklch(0.5819 0.0989 var(--primary-hue)); --focus-color: oklch(0.5819 0.0989 var(--primary-hue)); --accent-text-2-color: oklch(0.5727 0.0974 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.9029 0.0466 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.082); --tiny-shadow-color: oklch(0.2243 0.0004 210 / 0.3242); --syntax-text-color: oklch(0.201 0 0); --syntax-comment-color: oklch(0.644 0.0017 210); --syntax-punctuation-color: oklch(0.644 0.0017 210); --syntax-keyword-color: oklch(0.6348 0.0796 210); --syntax-string-color: oklch(0.6551 0.1033 15); --syntax-token-color: oklch(0.6374 0.0873 125); --syntax-property-color: oklch(0.6337 0.0823 155); --syntax-number-color: oklch(0.6473 0.0892 70); --syntax-function-color: oklch(0.636 0.0706 210); --syntax-value-color: oklch(0.6367 0.0657 210); --syntax-operator-color: oklch(0.6558 0.1004 340); } }
@media (not (prefers-contrast: more)) { :root:where(:has(input[name="theme"][value="dark"]:checked):not(:has(input[name="highContrast"][value="on"]:checked))) { --primary-surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --primary-surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-text-color: oklch(0.9571 0.0008 var(--primary-hue)); --primary-text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --primary-border-color: oklch(0.3645 0.0117 var(--primary-hue)); --primary-accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --primary-shadow-color: oklch(0.1367 0 0 / 0.5448); --primary-small-shadow-color: oklch(0.1367 0 0); --primary-illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --primary-tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --text-color: oklch(0.9571 0.0008 var(--primary-hue)); --text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --border-color: oklch(0.3645 0.0117 var(--primary-hue)); --accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --shadow-color: oklch(0.1367 0 0 / 0.5448); --small-shadow-color: oklch(0.1367 0 0); --illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --syntax-bg-color: oklch(0.2534 0.0073 210); --syntax-text-color: oklch(0.9571 0 0); --syntax-comment-color: oklch(0.7768 0.0013 210); --syntax-punctuation-color: oklch(0.7768 0.0013 210); --syntax-keyword-color: oklch(0.7683 0.0779 210); --syntax-string-color: oklch(0.7842 0.0644 15); --syntax-token-color: oklch(0.7706 0.0801 125); --syntax-property-color: oklch(0.7674 0.0768 155); --syntax-number-color: oklch(0.7798 0.0777 70); --syntax-function-color: oklch(0.7697 0.0665 210); --syntax-value-color: oklch(0.7704 0.0607 210); --syntax-operator-color: oklch(0.7846 0.0631 340); } }
@media (prefers-contrast: more) { :root:where(:has(input[name="theme"][value="dark"]:checked):not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) { --primary-surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --primary-surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-text-color: oklch(0.9571 0.0008 var(--primary-hue)); --primary-text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --primary-border-color: oklch(0.3645 0.0117 var(--primary-hue)); --primary-accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --primary-shadow-color: oklch(0.1367 0 0 / 0.5448); --primary-small-shadow-color: oklch(0.1367 0 0); --primary-illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --primary-tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --text-color: oklch(0.9571 0.0008 var(--primary-hue)); --text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --border-color: oklch(0.3645 0.0117 var(--primary-hue)); --accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --shadow-color: oklch(0.1367 0 0 / 0.5448); --small-shadow-color: oklch(0.1367 0 0); --illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --syntax-bg-color: oklch(0.2534 0.0073 210); --syntax-text-color: oklch(0.9571 0 0); --syntax-comment-color: oklch(0.7768 0.0013 210); --syntax-punctuation-color: oklch(0.7768 0.0013 210); --syntax-keyword-color: oklch(0.7683 0.0779 210); --syntax-string-color: oklch(0.7842 0.0644 15); --syntax-token-color: oklch(0.7706 0.0801 125); --syntax-property-color: oklch(0.7674 0.0768 155); --syntax-number-color: oklch(0.7798 0.0777 70); --syntax-function-color: oklch(0.7697 0.0665 210); --syntax-value-color: oklch(0.7704 0.0607 210); --syntax-operator-color: oklch(0.7846 0.0631 340); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :root:where(:has(input[name="theme"][value="system"]:checked):not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --primary-surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-text-color: oklch(0.9571 0.0008 var(--primary-hue)); --primary-text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --primary-border-color: oklch(0.3645 0.0117 var(--primary-hue)); --primary-accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --primary-shadow-color: oklch(0.1367 0 0 / 0.5448); --primary-small-shadow-color: oklch(0.1367 0 0); --primary-illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --primary-tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --text-color: oklch(0.9571 0.0008 var(--primary-hue)); --text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --border-color: oklch(0.3645 0.0117 var(--primary-hue)); --accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --shadow-color: oklch(0.1367 0 0 / 0.5448); --small-shadow-color: oklch(0.1367 0 0); --illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --syntax-bg-color: oklch(0.2534 0.0073 210); --syntax-text-color: oklch(0.9571 0 0); --syntax-comment-color: oklch(0.7768 0.0013 210); --syntax-punctuation-color: oklch(0.7768 0.0013 210); --syntax-keyword-color: oklch(0.7683 0.0779 210); --syntax-string-color: oklch(0.7842 0.0644 15); --syntax-token-color: oklch(0.7706 0.0801 125); --syntax-property-color: oklch(0.7674 0.0768 155); --syntax-number-color: oklch(0.7798 0.0777 70); --syntax-function-color: oklch(0.7697 0.0665 210); --syntax-value-color: oklch(0.7704 0.0607 210); --syntax-operator-color: oklch(0.7846 0.0631 340); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root:where(:has(input[name="theme"][value="system"]:checked):not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --primary-surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --primary-text-color: oklch(0.9571 0.0008 var(--primary-hue)); --primary-text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --primary-border-color: oklch(0.3645 0.0117 var(--primary-hue)); --primary-accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --primary-shadow-color: oklch(0.1367 0 0 / 0.5448); --primary-small-shadow-color: oklch(0.1367 0 0); --primary-illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --primary-tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --surface-color: oklch(0.2534 0.0022 var(--primary-hue)); --surface-2-color: oklch(0.287 0.0037 var(--primary-hue)); --surface-down-color: oklch(0.4157 0.0053 var(--primary-hue)); --surface-topbar-color: oklch(0.287 0.0037 var(--primary-hue)); --text-color: oklch(0.9571 0.0008 var(--primary-hue)); --text-soft-color: oklch(0.792 0.0026 var(--primary-hue)); --border-color: oklch(0.3645 0.0117 var(--primary-hue)); --accent-text-color: oklch(0.7643 0.1077 var(--primary-hue)); --focus-color: oklch(0.7643 0.1077 var(--primary-hue)); --accent-text-2-color: oklch(0.7732 0.1032 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8715 0.0563 var(--primary-hue)); --shadow-color: oklch(0.1367 0 0 / 0.5448); --small-shadow-color: oklch(0.1367 0 0); --illustration-shadow-color: oklch(0.1367 0.0038 210 / 0.5283); --tiny-shadow-color: oklch(0.216 0.0003 210 / 0.2084); --syntax-bg-color: oklch(0.2534 0.0073 210); --syntax-text-color: oklch(0.9571 0 0); --syntax-comment-color: oklch(0.7768 0.0013 210); --syntax-punctuation-color: oklch(0.7768 0.0013 210); --syntax-keyword-color: oklch(0.7683 0.0779 210); --syntax-string-color: oklch(0.7842 0.0644 15); --syntax-token-color: oklch(0.7706 0.0801 125); --syntax-property-color: oklch(0.7674 0.0768 155); --syntax-number-color: oklch(0.7798 0.0777 70); --syntax-function-color: oklch(0.7697 0.0665 210); --syntax-value-color: oklch(0.7704 0.0607 210); --syntax-operator-color: oklch(0.7846 0.0631 340); } }
:root:where(:has(input[name="theme"][value="dark"]:checked)) { --primary-glass-border-color: oklch(0.9571 0.0009 var(--primary-hue)); --primary-accent-surface-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --glass-border-color: oklch(0.9571 0.0009 var(--primary-hue)); --accent-surface-text-color: oklch(0.9571 0.0182 var(--primary-hue)); }
@media (prefers-color-scheme: dark) { :root:where(:has(input[name="theme"][value="system"]:checked):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-glass-border-color: oklch(0.9571 0.0009 var(--primary-hue)); --primary-accent-surface-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --glass-border-color: oklch(0.9571 0.0009 var(--primary-hue)); --accent-surface-text-color: oklch(0.9571 0.0182 var(--primary-hue)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root:where(:is(:has(input[name="highContrast"][value="on"]:checked):has(input[name="theme"][value="dark"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)), :has(input[name="highContrast"][value="on"]:checked):has(input[name="theme"][value="system"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)), :has(input[name="highContrast"][value="system"]:checked):has(input[name="theme"][value="dark"]:checked):not(:has(input[name="theme"][value="system"]:checked)), :has(input[name="highContrast"][value="system"]:checked):has(input[name="theme"][value="system"]:checked))) { --primary-surface-color: oklch(0 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0); --primary-small-shadow-color: oklch(0 0 0); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --shadow-color: oklch(0 0 0); --small-shadow-color: oklch(0 0 0); --syntax-bg-color: oklch(0 0 0); --primary-surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --primary-text-color: oklch(1 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --primary-border-color: oklch(0.421 0.0135 var(--primary-hue)); --primary-accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --primary-accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.1151 0.0032 210); --primary-tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --text-color: oklch(1 0 var(--primary-hue)); --text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --border-color: oklch(0.421 0.0135 var(--primary-hue)); --accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --illustration-shadow-color: oklch(0.1151 0.0032 210); --tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --syntax-text-color: oklch(1 0 0); --syntax-comment-color: oklch(0.8443 0.0009 210); --syntax-punctuation-color: oklch(0.8443 0.0009 210); --syntax-keyword-color: oklch(0.837 0.0685 210); --syntax-string-color: oklch(0.8496 0.0449 15); --syntax-token-color: oklch(0.8387 0.071 125); --syntax-property-color: oklch(0.8359 0.0686 155); --syntax-number-color: oklch(0.8465 0.0599 70); --syntax-function-color: oklch(0.8382 0.0571 210); --syntax-value-color: oklch(0.8389 0.0514 210); --syntax-operator-color: oklch(0.8498 0.0443 340); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :root:where(:has(input[name="highContrast"][value="on"]:checked):is(:has(input[name="theme"][value="dark"]:checked):not(:has(input[name="theme"][value="system"]:checked)), :has(input[name="theme"][value="system"]:checked))) { --primary-surface-color: oklch(0 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0); --primary-small-shadow-color: oklch(0 0 0); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --shadow-color: oklch(0 0 0); --small-shadow-color: oklch(0 0 0); --syntax-bg-color: oklch(0 0 0); --primary-surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --primary-text-color: oklch(1 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --primary-border-color: oklch(0.421 0.0135 var(--primary-hue)); --primary-accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --primary-accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.1151 0.0032 210); --primary-tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --text-color: oklch(1 0 var(--primary-hue)); --text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --border-color: oklch(0.421 0.0135 var(--primary-hue)); --accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --illustration-shadow-color: oklch(0.1151 0.0032 210); --tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --syntax-text-color: oklch(1 0 0); --syntax-comment-color: oklch(0.8443 0.0009 210); --syntax-punctuation-color: oklch(0.8443 0.0009 210); --syntax-keyword-color: oklch(0.837 0.0685 210); --syntax-string-color: oklch(0.8496 0.0449 15); --syntax-token-color: oklch(0.8387 0.071 125); --syntax-property-color: oklch(0.8359 0.0686 155); --syntax-number-color: oklch(0.8465 0.0599 70); --syntax-function-color: oklch(0.8382 0.0571 210); --syntax-value-color: oklch(0.8389 0.0514 210); --syntax-operator-color: oklch(0.8498 0.0443 340); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :root:where(:has(input[name="theme"][value="dark"]:checked):is(:has(input[name="highContrast"][value="on"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)), :has(input[name="highContrast"][value="system"]:checked))) { --primary-surface-color: oklch(0 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0); --primary-small-shadow-color: oklch(0 0 0); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --shadow-color: oklch(0 0 0); --small-shadow-color: oklch(0 0 0); --syntax-bg-color: oklch(0 0 0); --primary-surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --primary-text-color: oklch(1 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --primary-border-color: oklch(0.421 0.0135 var(--primary-hue)); --primary-accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --primary-accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.1151 0.0032 210); --primary-tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --text-color: oklch(1 0 var(--primary-hue)); --text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --border-color: oklch(0.421 0.0135 var(--primary-hue)); --accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --illustration-shadow-color: oklch(0.1151 0.0032 210); --tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --syntax-text-color: oklch(1 0 0); --syntax-comment-color: oklch(0.8443 0.0009 210); --syntax-punctuation-color: oklch(0.8443 0.0009 210); --syntax-keyword-color: oklch(0.837 0.0685 210); --syntax-string-color: oklch(0.8496 0.0449 15); --syntax-token-color: oklch(0.8387 0.071 125); --syntax-property-color: oklch(0.8359 0.0686 155); --syntax-number-color: oklch(0.8465 0.0599 70); --syntax-function-color: oklch(0.8382 0.0571 210); --syntax-value-color: oklch(0.8389 0.0514 210); --syntax-operator-color: oklch(0.8498 0.0443 340); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :root:where(:has(input[name="highContrast"][value="on"]:checked):has(input[name="theme"][value="dark"]:checked)) { --primary-surface-color: oklch(0 0 var(--primary-hue)); --primary-surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0); --primary-small-shadow-color: oklch(0 0 0); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --shadow-color: oklch(0 0 0); --small-shadow-color: oklch(0 0 0); --syntax-bg-color: oklch(0 0 0); --primary-surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --primary-text-color: oklch(1 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --primary-border-color: oklch(0.421 0.0135 var(--primary-hue)); --primary-accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --primary-accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.1151 0.0032 210); --primary-tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --surface-down-color: oklch(0.3776 0.0049 var(--primary-hue)); --surface-topbar-color: oklch(0.2398 0.0031 var(--primary-hue)); --text-color: oklch(1 0 var(--primary-hue)); --text-soft-color: oklch(0.8442 0.0019 var(--primary-hue)); --border-color: oklch(0.421 0.0135 var(--primary-hue)); --accent-text-color: oklch(0.8365 0.0726 var(--primary-hue)); --focus-color: oklch(0.8365 0.0726 var(--primary-hue)); --accent-text-2-color: oklch(0.8401 0.0709 var(--primary-hue)); --accent-surface-color: oklch(0.455 0.0696 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.0441 var(--primary-hue)); --illustration-shadow-color: oklch(0.1151 0.0032 210); --tiny-shadow-color: oklch(0.1925 0.0003 210 / 0.3071); --syntax-text-color: oklch(1 0 0); --syntax-comment-color: oklch(0.8443 0.0009 210); --syntax-punctuation-color: oklch(0.8443 0.0009 210); --syntax-keyword-color: oklch(0.837 0.0685 210); --syntax-string-color: oklch(0.8496 0.0449 15); --syntax-token-color: oklch(0.8387 0.071 125); --syntax-property-color: oklch(0.8359 0.0686 155); --syntax-number-color: oklch(0.8465 0.0599 70); --syntax-function-color: oklch(0.8382 0.0571 210); --syntax-value-color: oklch(0.8389 0.0514 210); --syntax-operator-color: oklch(0.8498 0.0443 340); } }
@media (not (prefers-color-scheme: dark)) { :root:where(:has(input[name="highContrast"][value="on"]:checked):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --primary-text-color: oklch(0 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --primary-border-color: oklch(0.7187 0.0257 var(--primary-hue)); --primary-accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --primary-accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --primary-tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --text-color: oklch(0 0 var(--primary-hue)); --text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --border-color: oklch(0.7187 0.0257 var(--primary-hue)); --accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --syntax-text-color: oklch(0 0 0); --syntax-comment-color: oklch(0.5358 0.0017 210); --syntax-punctuation-color: oklch(0.5358 0.0017 210); --syntax-keyword-color: oklch(0.5276 0.0681 210); --syntax-string-color: oklch(0.5458 0.1015 15); --syntax-token-color: oklch(0.53 0.0763 125); --syntax-property-color: oklch(0.5266 0.0716 155); --syntax-number-color: oklch(0.5385 0.0781 70); --syntax-function-color: oklch(0.5286 0.0612 210); --syntax-value-color: oklch(0.5292 0.0574 210); --syntax-operator-color: oklch(0.5468 0.0988 340); } }
@media (prefers-color-scheme: dark) { :root:where(:has(input[name="highContrast"][value="on"]:checked):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) { --primary-surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --primary-text-color: oklch(0 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --primary-border-color: oklch(0.7187 0.0257 var(--primary-hue)); --primary-accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --primary-accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --primary-tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --text-color: oklch(0 0 var(--primary-hue)); --text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --border-color: oklch(0.7187 0.0257 var(--primary-hue)); --accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --syntax-text-color: oklch(0 0 0); --syntax-comment-color: oklch(0.5358 0.0017 210); --syntax-punctuation-color: oklch(0.5358 0.0017 210); --syntax-keyword-color: oklch(0.5276 0.0681 210); --syntax-string-color: oklch(0.5458 0.1015 15); --syntax-token-color: oklch(0.53 0.0763 125); --syntax-property-color: oklch(0.5266 0.0716 155); --syntax-number-color: oklch(0.5385 0.0781 70); --syntax-function-color: oklch(0.5286 0.0612 210); --syntax-value-color: oklch(0.5292 0.0574 210); --syntax-operator-color: oklch(0.5468 0.0988 340); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :root:where(:has(input[name="highContrast"][value="system"]:checked):not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) { --primary-surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --primary-text-color: oklch(0 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --primary-border-color: oklch(0.7187 0.0257 var(--primary-hue)); --primary-accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --primary-accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --primary-tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --text-color: oklch(0 0 var(--primary-hue)); --text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --border-color: oklch(0.7187 0.0257 var(--primary-hue)); --accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --syntax-text-color: oklch(0 0 0); --syntax-comment-color: oklch(0.5358 0.0017 210); --syntax-punctuation-color: oklch(0.5358 0.0017 210); --syntax-keyword-color: oklch(0.5276 0.0681 210); --syntax-string-color: oklch(0.5458 0.1015 15); --syntax-token-color: oklch(0.53 0.0763 125); --syntax-property-color: oklch(0.5266 0.0716 155); --syntax-number-color: oklch(0.5385 0.0781 70); --syntax-function-color: oklch(0.5286 0.0612 210); --syntax-value-color: oklch(0.5292 0.0574 210); --syntax-operator-color: oklch(0.5468 0.0988 340); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root:where(:has(input[name="highContrast"][value="system"]:checked):not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) { --primary-surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --primary-surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --primary-text-color: oklch(0 0 var(--primary-hue)); --primary-text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --primary-border-color: oklch(0.7187 0.0257 var(--primary-hue)); --primary-accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --primary-accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --primary-accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --primary-accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --primary-illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --primary-tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --surface-down-color: oklch(0.7695 0.0098 var(--primary-hue)); --surface-topbar-color: oklch(0.9178 0.0033 var(--primary-hue)); --text-color: oklch(0 0 var(--primary-hue)); --text-soft-color: oklch(0.3474 0.0017 var(--primary-hue)); --border-color: oklch(0.7187 0.0257 var(--primary-hue)); --accent-text-color: oklch(0.5232 0.0889 var(--primary-hue)); --focus-color: oklch(0.5232 0.0889 var(--primary-hue)); --accent-text-2-color: oklch(0.4563 0.0776 var(--primary-hue)); --accent-surface-color: oklch(0.4543 0.0772 var(--primary-hue)); --accent-surface-text-hover-color: oklch(0.8981 0.049 var(--primary-hue)); --illustration-shadow-color: oklch(0.3015 0.0092 210 / 0.0946); --tiny-shadow-color: oklch(0.1923 0.0003 210 / 0.5028); --syntax-text-color: oklch(0 0 0); --syntax-comment-color: oklch(0.5358 0.0017 210); --syntax-punctuation-color: oklch(0.5358 0.0017 210); --syntax-keyword-color: oklch(0.5276 0.0681 210); --syntax-string-color: oklch(0.5458 0.1015 15); --syntax-token-color: oklch(0.53 0.0763 125); --syntax-property-color: oklch(0.5266 0.0716 155); --syntax-number-color: oklch(0.5385 0.0781 70); --syntax-function-color: oklch(0.5286 0.0612 210); --syntax-value-color: oklch(0.5292 0.0574 210); --syntax-operator-color: oklch(0.5468 0.0988 340); } }
body { display: flex; flex-flow: column; background-color: var(--surface-2-color); color: var(--text-color); --current-color: var(--text-color); font-size: var(--t2-font-size, var(--default-font-size)); line-height: var(--t2-line-height, var(--default-line-height)); letter-spacing: var(--t2-letter-spacing, var(--default-letter-spacing)); font-weight: var(--t2-font-weight, var(--default-font-weight)); font-style: var(--t2-font-style, var(--default-font-style)); text-transform: var(--t2-text-transform, var(--default-text-transform)); font-family: var(--t2-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--t2-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--t2-icon-size, var(--default-icon-size)); margin: 0px; padding: 16px; height: auto; min-height: 100dvh; max-height: initial; }
code { font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--code-font-weight, var(--default-font-weight)); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); }
a { font-weight: 600; }
a:where(:not(:focus-visible)) { outline: var(--outline-width) none var(--outline-color); }
a:where(:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
button:where(:not(:focus-visible)) { outline: var(--outline-width) none var(--outline-color); }
button:where(:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
html { font-family: var(--font-sans, var(--font-sans-fallback)); color: var(--text-color); --current-color: var(--text-color); background-color: var(--surface-color); container-type: scroll-state; container-name: page; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: var(--t2-font-size, var(--default-font-size)); line-height: var(--t2-line-height, var(--default-line-height)); letter-spacing: var(--t2-letter-spacing, var(--default-letter-spacing)); font-weight: var(--t2-font-weight, var(--default-font-weight)); font-style: var(--t2-font-style, var(--default-font-style)); text-transform: var(--t2-text-transform, var(--default-text-transform)); font-family: var(--t2-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--t2-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--t2-icon-size, var(--default-icon-size)); margin: 0; padding: 0; }
.t1y7ketf.t1y7ketf { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.t1h4ektc.t1h4ektc { color: var(--accent-surface-text-color); --current-color: var(--accent-surface-text-color); background-color: var(--accent-surface-color); border-radius: 6px; box-shadow:  0 1px 1px var(--tiny-shadow-color); }
.tbaatu5.tbaatu5 { font-size: var(--label-font-size, var(--default-font-size)); line-height: var(--label-line-height, var(--default-line-height)); letter-spacing: var(--label-letter-spacing, var(--default-letter-spacing)); font-weight: var(--label-font-weight, var(--default-font-weight)); font-style: var(--label-font-style, var(--default-font-style)); text-transform: var(--label-text-transform, var(--default-text-transform)); font-family: var(--label-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--label-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--label-icon-size, var(--default-icon-size)); }
.tio7p3f.tio7p3f { padding: 0 4px; }
.t1yvpv5p.t1yvpv5p { white-space: nowrap; }
.t122p9rj.t122p9rj { margin: 0 auto; }
@media (not (width < 640px)) { .t122p9rj.t122p9rj { padding: 16px 0; } }
@media (not (640px <= width < 1024px)) { .t122p9rj.t122p9rj { width: calc(100dvw - 16px); min-width: initial; max-width: calc(var(--max-width) + 16px); } }
@media (width < 640px) { .t122p9rj.t122p9rj { padding: 8px 0; } }
@media (640px <= width < 1024px) { .t122p9rj.t122p9rj { width: calc(100dvw - 32px); min-width: initial; max-width: calc(var(--max-width) + 16px); } }
.t1s8c6pf.t1s8c6pf { inset: 0 auto auto auto; position: sticky; transition: inset .5s, top .5s, right .5s, bottom .5s, left .5s; z-index: 100; }
@supports (container-type: scroll-state) { @container scroll-state(scrolled: block-end) { .t1s8c6pf.t1s8c6pf { inset: -80px auto auto auto; } } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t18fspna.t18fspna { background-color: oklch(from var(--surface-color) l c h / .5); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t18fspna.t18fspna { background-color: oklch(from var(--surface-color) l c h / .5); } }
.t18fspna.t18fspna { border-radius: 10px; box-shadow:  0 4px 8px var(--shadow-color); }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t18fspna.t18fspna { background-color: var(--surface-topbar-color); }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t18fspna.t18fspna { background-color: var(--surface-topbar-color); } }
.t15hnpf0.t15hnpf0 { padding: 12px; }
.t1jnwtbd.t1jnwtbd { position: relative; }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t1ekicyp.t1ekicyp { backdrop-filter: blur(8px); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t1ekicyp.t1ekicyp { backdrop-filter: blur(8px); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
.t1ekicyp.t1ekicyp { view-transition-name: header; }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t1ekicyp.t1ekicyp { backdrop-filter: none; background-image: none; }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t1ekicyp.t1ekicyp { backdrop-filter: none; background-image: none; } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):has(input[name="theme"][value="system"]:checked)) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t1ekicyp.t1ekicyp { background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
.t16dw194.t16dw194 [data-element="Avatar"] { display: block; width: 40px; min-width: initial; max-width: initial; height: 40px; min-height: initial; max-height: initial; }
.t16dw194.t16dw194::before { content: ""; border-radius: 10px; position: absolute; inset: 0px; pointer-events: none; }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .5); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .5); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .5); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .5); } }
.t16dw194.t16dw194 [data-element="Nav"] { display: flex; flex-flow: row; align-items: center; justify-content: space-between; }
.t16dw194.t16dw194 [data-element="NavLink"] { font-size: var(--nav-font-size, var(--default-font-size)); line-height: var(--nav-line-height, var(--default-line-height)); letter-spacing: var(--nav-letter-spacing, var(--default-letter-spacing)); font-weight: var(--nav-font-weight, var(--default-font-weight)); font-style: var(--nav-font-style, var(--default-font-style)); text-transform: var(--nav-text-transform, var(--default-text-transform)); font-family: var(--nav-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--nav-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--nav-icon-size, var(--default-icon-size)); text-decoration: none; transition: color 0.15s; }
.t16dw194.t16dw194 [data-element="NavLink"]:where(:not(:hover)) { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.t16dw194.t16dw194 [data-element="NavLinks"] { display: flex; gap: 16px; flex-flow: row; align-items: center; }
.t16dw194.t16dw194 [data-element="SiteName"] { display: flex; align-items: center; text-decoration: none; margin: -8px 0; }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .12); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .12); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):has(input[name="theme"][value="system"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .12); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid oklch(from var(--glass-border-color) l c h / .12); } }
.t16dw194.t16dw194 [data-element="NavLink"]:where(:hover) { color: var(--text-color); --current-color: var(--text-color); }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid var(--border-color); }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t16dw194.t16dw194::before { border: var(--border-width) solid var(--border-color); } }
.t14fdeji.t14fdeji button { display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; border-radius: 6px; border: 1px solid var(--border-color, currentColor); transition: color 0.15s, background-color 0.15s, background-image 0.15s, --tasty-second-fill-color 0.15s, background-position 0.15s, background-size 0.15s, background-repeat 0.15s, background-attachment 0.15s, background-origin 0.15s, background-clip 0.15s; }
.t14fdeji.t14fdeji button:where(:not(:hover)) { color: var(--accent-text-color); --current-color: var(--accent-text-color); }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]), [data-collapsed])) button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-color) l c h / .75), oklch(from var(--surface-down-color) l c h / .1)); } }
.t14fdeji.t14fdeji [data-element="Label"] { font-size: var(--label-font-size, var(--default-font-size)); line-height: var(--label-line-height, var(--default-line-height)); letter-spacing: var(--label-letter-spacing, var(--default-letter-spacing)); font-weight: var(--label-font-weight, var(--default-font-weight)); font-style: var(--label-font-style, var(--default-font-style)); text-transform: var(--label-text-transform, var(--default-text-transform)); font-family: var(--label-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--label-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--label-icon-size, var(--default-icon-size)); color: var(--text-soft-color); --current-color: var(--text-soft-color); white-space: nowrap; }
.t14fdeji.t14fdeji [data-element="Popover"] { position: absolute; inset: 100% 0 auto auto; margin: 8px 0; padding: 8px; gap: 8px; background-color: var(--surface-color); border: 1px solid var(--border-color, currentColor); border-radius: 10px; box-shadow:  0 8px 16px var(--shadow-color); display: flex; flex-flow: column; outline: var(--outline-width) none var(--outline-color); width: 260px; min-width: initial; max-width: initial; z-index: 200; }
.t14fdeji.t14fdeji:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { visibility: hidden; opacity: 0; transition: opacity 80ms 150ms, transform 80ms 150ms, translate 80ms 150ms, visibility 80ms 150ms allow-discrete; }
@media (not (prefers-reduced-motion: reduce)) { .t14fdeji.t14fdeji:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { translate: 0 -8px; } }
.t14fdeji.t14fdeji [data-element="Setting"] { display: flex; gap: 8px; flex-flow: row; align-items: center; justify-content: space-between; }
.t14fdeji.t14fdeji button:where(:hover) { color: var(--accent-text-2-color); --current-color: var(--accent-text-2-color); }
.t14fdeji.t14fdeji:where(:focus-within:not([data-collapsed])) [data-element="Popover"] { visibility: visible; opacity: 1; transition: opacity 80ms, transform 80ms, translate 80ms, visibility 80ms allow-discrete; translate: 0 0; }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) .t14fdeji.t14fdeji button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked))) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t14fdeji.t14fdeji button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:is(:not([data-collapsed]):not(:focus-within), [data-collapsed])) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji button:where(:active), :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t14fdeji.t14fdeji:where(:not([data-collapsed]):focus-within) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where([data-collapsed]) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t14fdeji.t14fdeji:where(:not([data-collapsed]):not(:focus-within)) button:where(:not(:active)) { background-color: var(--surface-2-color); background-image: linear-gradient(to bottom, oklch(from var(--surface-down-color) l c h / .1), oklch(from var(--surface-color) l c h / .75)); } }
@media (prefers-reduced-motion: reduce) { .t14fdeji.t14fdeji:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { translate: 0 0; } }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t14fdeji.t14fdeji button { background-color: var(--surface-2-color); background-image: none; }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t14fdeji.t14fdeji button { background-color: var(--surface-2-color); background-image: none; } }
.tm0qs5m.tm0qs5m { display: flex; gap: 6px; flex-flow: column; }
.tula54j.tula54j [data-element="Label"] { font-size: var(--label-font-size, var(--default-font-size)); line-height: var(--label-line-height, var(--default-line-height)); letter-spacing: var(--label-letter-spacing, var(--default-letter-spacing)); font-weight: var(--label-font-weight, var(--default-font-weight)); font-style: var(--label-font-style, var(--default-font-style)); text-transform: var(--label-text-transform, var(--default-text-transform)); font-family: var(--label-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--label-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--label-icon-size, var(--default-icon-size)); color: var(--text-soft-color); --current-color: var(--text-soft-color); white-space: nowrap; }
.tula54j.tula54j [data-element="Slider"]::-moz-range-thumb { width: 14px; min-width: initial; max-width: initial; height: 14px; min-height: initial; max-height: initial; border-radius: 50%; background-color: var(--surface-color); border: 2px solid var(--text-color); cursor: pointer; }
.tula54j.tula54j label { position: relative; flex-grow: 1; height: 100%; min-height: initial; max-height: initial; display: flex; align-items: center; justify-items: center; align-content: center; justify-content: center; cursor: pointer; }
.tula54j.tula54j input[type="radio"] { position: absolute; width: 1px; min-width: initial; max-width: initial; height: 1px; min-height: initial; max-height: initial; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border: var(--border-width) none var(--border-color, currentColor); opacity: 0; }
:where(:root:not([data-js])) .tula54j.tula54j input[type="range"] { display: none; }
.tula54j.tula54j input[type="range"] { width: 100%; min-width: initial; max-width: initial; height: 16px; min-height: initial; max-height: initial; appearance: none; border-radius: 6px; background-image: linear-gradient(to right, rgb(84.8% 34.8% 53.2%), rgb(75% 47.5% 22.8%), rgb(51.3% 58.8% 24.1%), rgb(24.9% 62% 55.6%), rgb(25.9% 58.1% 78.7%), rgb(61.1% 44.4% 86.9%), rgb(84.8% 34.8% 53.2%)); }
.tula54j.tula54j input[type="range"]:where(:not([disabled])) { cursor: pointer; opacity: 1; }
.tula54j.tula54j input[type="range"]:where(:not(:focus-visible)) { outline: var(--outline-width) none var(--outline-color); }
.tula54j.tula54j [data-element="Thumb"] { width: 14px; min-width: initial; max-width: initial; height: 14px; min-height: initial; max-height: initial; border-radius: 50%; background-color: var(--surface-color); border: 2px solid var(--text-color); }
.tula54j.tula54j [data-element="Thumb"]:where(:not(:is(input:checked ~ *)):not(:is(input:focus-visible ~ *))) { opacity: 0; }
:where(:root:not([data-js])) .tula54j.tula54j [data-element="Track"] { display: flex; }
.tula54j.tula54j [data-element="Track"] { flex-flow: row; position: relative; width: 100%; min-width: initial; max-width: initial; height: 16px; min-height: initial; max-height: initial; border-radius: 6px; background-image: linear-gradient(to right, rgb(84.8% 34.8% 53.2%), rgb(75% 47.5% 22.8%), rgb(51.3% 58.8% 24.1%), rgb(24.9% 62% 55.6%), rgb(25.9% 58.1% 78.7%), rgb(61.1% 44.4% 86.9%), rgb(84.8% 34.8% 53.2%)); }
.tula54j.tula54j:where(:not(:has(input:focus-visible))) [data-element="Track"] { outline: var(--outline-width) none var(--outline-color); }
.tula54j.tula54j [data-element="Slider"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; min-width: initial; max-width: initial; height: 14px; min-height: initial; max-height: initial; border-radius: 50%; background-color: var(--surface-color); border: 2px solid var(--text-color); cursor: pointer; }
:where(:root[data-js]) .tula54j.tula54j input[type="range"] { display: block; }
.tula54j.tula54j input[type="range"]:where([disabled]) { cursor: not-allowed; opacity: .4; }
.tula54j.tula54j input[type="range"]:where(:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
:where(:root[data-js]) .tula54j.tula54j [data-element="Track"] { display: none; }
.tula54j.tula54j:where(:has(input:focus-visible)) [data-element="Track"] { outline: 2px solid var(--focus-color); outline-offset: 1px; }
.tula54j.tula54j [data-element="Thumb"]:where(:is(input:checked ~ *)), .tula54j.tula54j [data-element="Thumb"]:where(:not(:is(input:checked ~ *)):is(input:focus-visible ~ *)) { opacity: 1; }
.tk1jh53.tk1jh53 { border: var(--border-width) none var(--border-color, currentColor); background-color: var(--border-color); }
.t1c8r3tz.t1c8r3tz { height: 1px; min-height: initial; max-height: initial; margin: 0; }
.t1728og.t1728og { border: 1px solid var(--border-color, currentColor); border-radius: 6px; }
.t1728og.t1728og:where(:not(:has(input:focus-visible:focus-within))) { outline: var(--outline-width) none var(--outline-color); }
.t1728og.t1728og:where(:has(input:focus-visible:focus-within)) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
.t1wva4qy.t1wva4qy { overflow: hidden; display: flex; flex-flow: row; }
.t1iv7hfb.t1iv7hfb { align-self: flex-start; }
.tmq7xpq.tmq7xpq input { position: absolute; width: 1px; min-width: initial; max-width: initial; height: 1px; min-height: initial; max-height: initial; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border: var(--border-width) none var(--border-color, currentColor); opacity: 0; }
.tmq7xpq.tmq7xpq [data-element="Option"] { cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px; transition: color 0.15s, background-color 0.15s, background-image 0.15s, --tasty-second-fill-color 0.15s; user-select: none; }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:not(:has(input:checked)):not(:hover)) { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:not(:has(input:checked))) { background-color: var(--surface-2-color); box-shadow: inset 0 0 4px oklch(from var(--small-shadow-color) l c h / 0); }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:not(:first-child)) { border-top: 0 solid var(--border-color); border-right: 0 solid var(--border-color); border-bottom: 0 solid var(--border-color); border-left: var(--border-width) solid var(--border-color); }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:has(input:checked)) { background-color: var(--surface-color); box-shadow: inset 0 0 4px var(--small-shadow-color); }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:first-child) { border: var(--border-width) none var(--border-color, currentColor); }
.tmq7xpq.tmq7xpq [data-element="Option"]:where(:has(input:checked)), .tmq7xpq.tmq7xpq [data-element="Option"]:where(:not(:has(input:checked)):hover) { color: var(--text-color); --current-color: var(--text-color); }
.t1q02lnn.t1q02lnn { margin: 0 auto; }
@media (not (640px <= width < 1024px)) { .t1q02lnn.t1q02lnn { width: calc(100dvw - 32px); min-width: initial; max-width: var(--max-width); } }
@media (640px <= width < 1024px) { .t1q02lnn.t1q02lnn { width: calc(100dvw - 48px); min-width: initial; max-width: var(--max-width); } }
.tzsuqk4.tzsuqk4 { font-size: var(--t3-font-size, var(--default-font-size)); line-height: var(--t3-line-height, var(--default-line-height)); letter-spacing: var(--t3-letter-spacing, var(--default-letter-spacing)); font-weight: var(--t3-font-weight, var(--default-font-weight)); font-style: var(--t3-font-style, var(--default-font-style)); text-transform: var(--t3-text-transform, var(--default-text-transform)); font-family: var(--t3-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--t3-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--t3-icon-size, var(--default-icon-size)); }
.t18rp8q8.t18rp8q8 { padding: 32px 0; width: 100%; min-width: initial; max-width: initial; }
.t17a57by.t17a57by { display: flex; }
.t6sqepu.t6sqepu { align-content: center; justify-content: center; }