@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 --border-color { syntax: "<color>"; inherits: true; initial-value: currentcolor; }
@property --outline-color { syntax: "<color>"; inherits: true; initial-value: currentcolor; }
@property --gap { syntax: "<length>"; inherits: true; initial-value: 8px; }
@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 --glass-edge-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --glass-fill-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --appearance-press-duration { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --knob-height { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --knob-width { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --knob-duration { syntax: "<time>"; inherits: true; initial-value: 0s; }

    @view-transition {
      navigation: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      ::view-transition-group(*),
      ::view-transition-old(*),
      ::view-transition-new(*) { animation: none !important; }
    }

    *, *::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: 14px; --max-width: 760px; --prose-width: 720px; --font-sans: "onest", system-ui, -apple-system, sans-serif; --font-mono: "source code pro", ui-monospace, monospace; --default-font-size: 16px; --default-line-height: 1.5; --default-font-weight: 400; --h1-line-height: 1.15; --h1-letter-spacing: -0.015em; --h1-font-weight: 700; --h1-bold-font-weight: 700; --h2-font-size: 26px; --h2-line-height: 1.25; --h2-letter-spacing: -0.005em; --h2-font-weight: 700; --h2-bold-font-weight: 700; --h3-font-size: 21px; --h3-line-height: 1.35; --h3-letter-spacing: 0; --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: 420; --t1-bold-font-weight: 600; --t2-font-size: 16px; --t2-line-height: 1.5; --t2-letter-spacing: normal; --t2-font-weight: 420; --t2-bold-font-weight: 600; --prose-font-size: 17px; --prose-line-height: 1.7; --prose-letter-spacing: normal; --prose-font-weight: 420; --prose-bold-font-weight: 600; --t3-font-size: 13px; --t3-line-height: 1.5; --t3-letter-spacing: normal; --t3-font-weight: 420; --t3-bold-font-weight: 600; --nav-font-size: 15px; --nav-line-height: 1.4; --nav-letter-spacing: normal; --nav-font-weight: 420; --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; --glass-fill-shade: .02; --scrollbar-thumb-color: var(--border-color); --scrollbar-track-color: color-mix(in oklab, var(--border-color) 40%, transparent); }
@media (not (width < 640px)) { :root { --large-card-radius: calc(14px + 16px); --h1-font-size: 36px; } }
@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)); --surface-color: oklch(1 0 var(--primary-hue)); --surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --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)); --surface-color: oklch(1 0 var(--primary-hue)); --surface-2-color: oklch(0.9581 0.0017 var(--primary-hue)); --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-text-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.0278); --primary-small-shadow-color: oklch(0 0 0 / 0.0549); --primary-illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.0278); --small-shadow-color: oklch(0 0 0 / 0.0549); --illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.0278); --primary-small-shadow-color: oklch(0 0 0 / 0.0549); --primary-illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.0278); --small-shadow-color: oklch(0 0 0 / 0.0549); --illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.0278); --primary-small-shadow-color: oklch(0 0 0 / 0.0549); --primary-illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.0278); --small-shadow-color: oklch(0 0 0 / 0.0549); --illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.0278); --primary-small-shadow-color: oklch(0 0 0 / 0.0549); --primary-illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-color: oklch(0.5565 0.0946 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4919 0.0836 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.0278); --small-shadow-color: oklch(0 0 0 / 0.0549); --illustration-shadow-color: oklch(0 0 0 / 0.0554); --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-contrast: more) { :root:where(:is(:has(input[name="highContrast"][value="on"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)), :has(input[name="highContrast"][value="system"]:checked))) { --primary-accent-surface-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-text-color: oklch(1 0 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0); --primary-small-shadow-color: oklch(0 0 0 / 0); --primary-illustration-shadow-color: oklch(0 0 0 / 0); --shadow-color: oklch(0 0 0 / 0); --small-shadow-color: oklch(0 0 0 / 0); --illustration-shadow-color: oklch(0 0 0 / 0); } }
@media (not (prefers-contrast: more)) { :root:where(:has(input[name="highContrast"][value="on"]:checked)) { --primary-accent-surface-text-color: oklch(1 0 var(--primary-hue)); --accent-surface-text-color: oklch(1 0 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0); --primary-small-shadow-color: oklch(0 0 0 / 0); --primary-illustration-shadow-color: oklch(0 0 0 / 0); --shadow-color: oklch(0 0 0 / 0); --small-shadow-color: oklch(0 0 0 / 0); --illustration-shadow-color: oklch(0 0 0 / 0); } }
@media (not (prefers-contrast: more)) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked))) { --glass-edge-lift: .04; --glass-edge-shade: .08; } }
@media (prefers-contrast: more) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) { --glass-edge-lift: .04; --glass-edge-shade: .08; } }
@media (width < 640px) { :root { --large-card-radius: calc(14px + 12px); --h1-font-size: 32px; } }
@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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.1522); --primary-small-shadow-color: oklch(0 0 0 / 0.324); --primary-illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.1522); --small-shadow-color: oklch(0 0 0 / 0.324); --illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.1522); --primary-small-shadow-color: oklch(0 0 0 / 0.324); --primary-illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.1522); --small-shadow-color: oklch(0 0 0 / 0.324); --illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.1522); --primary-small-shadow-color: oklch(0 0 0 / 0.324); --primary-illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.1522); --small-shadow-color: oklch(0 0 0 / 0.324); --illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --primary-accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --primary-accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --primary-shadow-color: oklch(0 0 0 / 0.1522); --primary-small-shadow-color: oklch(0 0 0 / 0.324); --primary-illustration-shadow-color: oklch(0 0 0 / 0.2228); --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-text-color: oklch(0.9571 0.0182 var(--primary-hue)); --accent-surface-color: oklch(0.5292 0.081 var(--primary-hue)); --accent-surface-hover-color: oklch(0.4628 0.0708 var(--primary-hue)); --shadow-color: oklch(0 0 0 / 0.1522); --small-shadow-color: oklch(0 0 0 / 0.324); --illustration-shadow-color: oklch(0 0 0 / 0.2228); --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="highContrast"][value="on"]:checked)) { --glass-edge-lift: .08; --glass-edge-shade: .16; }
@media (prefers-contrast: more) { :root:where(:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) { --glass-edge-lift: .08; --glass-edge-shade: .16; } }
@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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0691 var(--primary-hue)); --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(: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-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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --syntax-bg-color: oklch(0 0 0); --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-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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --syntax-bg-color: oklch(0 0 0); --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-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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --syntax-bg-color: oklch(0 0 0); --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-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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --surface-color: oklch(0 0 var(--primary-hue)); --surface-2-color: oklch(0.1864 0.0024 var(--primary-hue)); --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-hover-color: oklch(0.4067 0.0622 var(--primary-hue)); --syntax-bg-color: oklch(0 0 0); --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); } }
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; border-radius: 6px; }
a:where(:not(:focus-visible)) { outline: 3px none var(--outline-color); }
a:where(:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
button { border-radius: 6px; }
button:where(:not(:focus-visible)) { outline: 3px 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; }
.astro-route-announcer { position: absolute; inset: 0 auto auto 0; width: 1px; min-width: initial; max-width: initial; height: 1px; min-height: initial; max-height: initial; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.t1y7ketf.t1y7ketf { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.t1rgc79l.t1rgc79l { color: var(--accent-surface-text-color); --current-color: var(--accent-surface-text-color); background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); border-radius: 9999rem; box-shadow:  0 0 1.5px var(--glass-fill-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)); }
.ttba9gi.ttba9gi { padding: 1px calc(6px + 1px); }
.t1yvpv5p.t1yvpv5p { white-space: nowrap; }
.t1jnwtbd.t1jnwtbd { position: relative; }
.t1nsatkl.t1nsatkl { --glass-edge-color: var(--glass-fill-color); --glass-fill-color: var(--accent-surface-color); }
.t1u03z67.t1u03z67::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.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); } }
.t1qkovoz.t1qkovoz { 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) { .t1qkovoz.t1qkovoz { inset: -80px auto auto auto; } } }
.tzuswrr.tzuswrr::before { content: ""; position: absolute; border-radius: calc(14px + 24px); pointer-events: none; mask: linear-gradient(white, white) content-box; }
@media (not (640px <= width < 1024px)) and (not (width < 640px)) { .tzuswrr.tzuswrr::before { inset: -8px -24px; padding: 24px; } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .tzuswrr.tzuswrr::before { 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))) .tzuswrr.tzuswrr::before { backdrop-filter: blur(8px); } }
@media (640px <= width < 1024px) { .tzuswrr.tzuswrr::before { inset: -8px 0; padding: 24px 0; } }
@media (not (640px <= width < 1024px)) and (width < 640px) { .tzuswrr.tzuswrr::before { padding: 24px 0; } }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .tzuswrr.tzuswrr::before { backdrop-filter: none; }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .tzuswrr.tzuswrr::before { backdrop-filter: none; } }
@media (width < 640px) { .tzuswrr.tzuswrr::before { inset: -16px 0; } }
.tunappd.tunappd { background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); border-radius: 14px; box-shadow:  0 4px 8px var(--shadow-color); }
.t15hnpf0.t15hnpf0 { padding: 12px; }
.thjbitf.thjbitf { position: relative; }
.thjbitf.thjbitf:where(:not(:has([data-appearance]:focus-within:not([data-collapsed])))) { transition: view-transition-name 0s 250ms allow-discrete; }
.thjbitf.thjbitf:where(:has([data-appearance]:focus-within:not([data-collapsed]))) { transition: none; }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .tcn97os.tcn97os { --glass-edge-color: var(--surface-color); --glass-fill-color: color-mix(in oklab, var(--surface-color) 50%, transparent); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .tcn97os.tcn97os { --glass-edge-color: var(--surface-color); --glass-fill-color: color-mix(in oklab, var(--surface-color) 50%, transparent); } }
.tcn97os.tcn97os:where(:not(:has([data-appearance]:focus-within:not([data-collapsed])))) { view-transition-name: header; }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .tcn97os.tcn97os { --glass-edge-color: var(--surface-topbar-color); --glass-fill-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)) .tcn97os.tcn97os { --glass-edge-color: var(--surface-topbar-color); --glass-fill-color: var(--surface-topbar-color); } }
.tcn97os.tcn97os:where(:has([data-appearance]:focus-within:not([data-collapsed]))) { view-transition-name: none; }
.t1l2muxn.t1l2muxn [data-element="Avatar"] { display: block; width: 40px; min-width: initial; max-width: initial; height: 40px; min-height: initial; max-height: initial; }
.t1l2muxn.t1l2muxn::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.t1l2muxn.t1l2muxn [data-element="Nav"] { display: flex; flex-flow: row; align-items: center; justify-content: space-between; }
.t1l2muxn.t1l2muxn [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; }
.t1l2muxn.t1l2muxn [data-element="NavLink"]:where(:not(:hover)) { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.t1l2muxn.t1l2muxn [data-element="NavLinks"] { display: flex; gap: 16px; flex-flow: row; align-items: center; }
.t1l2muxn.t1l2muxn [data-element="SiteName"] { display: flex; align-items: center; text-decoration: none; margin: -8px 0; }
.t1l2muxn.t1l2muxn [data-element="NavLink"]:where(:hover) { color: var(--text-color); --current-color: var(--text-color); }
.t9p0knx.t9p0knx button { position: relative; --glass-edge-color: var(--glass-fill-color); background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); display: flex; align-items: center; justify-content: center; padding: calc(6px + 1px); cursor: pointer; border-radius: 9999rem; border: 1px none var(--border-color); transition: color var(--appearance-press-duration), --glass-fill-color var(--appearance-press-duration), box-shadow var(--appearance-press-duration), transform var(--appearance-press-duration) ease-out, scale var(--appearance-press-duration) ease-out; }
@media (not (prefers-reduced-motion: reduce)) { .t9p0knx.t9p0knx button:where(:not(:active)) { --appearance-press-duration: 150ms; scale: 1; } }
@media (not (hover: hover)) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) button { color: var(--accent-text-color); --current-color: var(--accent-text-color); } }
@media (hover: hover) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) button:where(:not(:hover)) { color: var(--accent-text-color); --current-color: var(--accent-text-color); } }
@media (not (hover: hover)) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) button:where(:not(:active)) { --glass-fill-color: var(--surface-2-color); } }
@media (hover: hover) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) button:where(:not(:active):not(:hover)) { --glass-fill-color: var(--surface-2-color); } }
.t9p0knx.t9p0knx button:where(:not(:active)) { box-shadow:  0 1px 2px color-mix(in oklab,var(--shadow-color) 30%,transparent); }
@media (prefers-reduced-motion: reduce) { .t9p0knx.t9p0knx button { scale: 1; --appearance-press-duration: 0ms; } }
.t9p0knx.t9p0knx button::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.t9p0knx.t9p0knx [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; }
.t9p0knx.t9p0knx [data-element="Popover"] { position: absolute; --glass-edge-color: var(--surface-color); background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); inset: 100% 0 auto auto; margin: 8px 0; padding: 8px; gap: 8px; border-radius: 14px; box-shadow:  0 8px 16px var(--shadow-color); display: flex; flex-flow: column; outline: 3px none var(--outline-color); width: 260px; min-width: initial; max-width: initial; z-index: 200; }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t9p0knx.t9p0knx [data-element="Popover"] { --glass-fill-color: color-mix(in oklab, var(--surface-color) 50%, transparent); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t9p0knx.t9p0knx [data-element="Popover"] { --glass-fill-color: color-mix(in oklab, var(--surface-color) 50%, transparent); } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { backdrop-filter: blur(0px); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { backdrop-filter: blur(0px); } }
.t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { visibility: hidden; opacity: 0; transition: opacity 80ms 150ms, transform 80ms 150ms, translate 80ms 150ms, backdrop-filter 80ms 150ms, visibility 80ms 150ms allow-discrete; }
@media (not (prefers-reduced-motion: reduce)) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { translate: 0 -8px; } }
.t9p0knx.t9p0knx [data-element="Popover"]::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.t9p0knx.t9p0knx [data-element="Setting"] { display: flex; gap: 8px; flex-flow: row; align-items: center; justify-content: space-between; }
@media (not (prefers-reduced-motion: reduce)) { .t9p0knx.t9p0knx button:where(:active) { --appearance-press-duration: 60ms; scale: 1.08; } }
@media (hover: hover) { .t9p0knx.t9p0knx button:where(:hover), .t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) button:where(:not(:hover)) { color: var(--accent-text-2-color); --current-color: var(--accent-text-2-color); } }
@media (not (hover: hover)) { .t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) button { color: var(--accent-text-2-color); --current-color: var(--accent-text-2-color); } }
@media (hover: hover) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) button:where(:not(:active):hover) { --glass-fill-color: color-mix(in srgb, var(--accent-text-color) 8%, var(--surface-2-color)); } }
.t9p0knx.t9p0knx button:where(:active) { box-shadow:  0 2px 4px color-mix(in oklab,var(--shadow-color) 30%,transparent); --glass-fill-color: color-mix(in srgb, var(--accent-text-color) 16%, var(--surface-2-color)); }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t9p0knx.t9p0knx [data-element="Popover"] { --glass-fill-color: var(--surface-color); backdrop-filter: none; }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t9p0knx.t9p0knx [data-element="Popover"] { --glass-fill-color: var(--surface-color); backdrop-filter: none; } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) [data-element="Popover"] { 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))) .t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) [data-element="Popover"] { backdrop-filter: blur(8px); } }
.t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) [data-element="Popover"] { visibility: visible; opacity: 1; transition: opacity 80ms, transform 80ms, translate 80ms, backdrop-filter 80ms, visibility 80ms allow-discrete; translate: 0 0; }
.t9p0knx.t9p0knx:where(:focus-within:not([data-collapsed])) button:where(:not(:active)) { --glass-fill-color: color-mix(in srgb, var(--accent-text-color) 12%, var(--surface-2-color)); }
@media (prefers-reduced-motion: reduce) { .t9p0knx.t9p0knx:where(:is(:not(:focus-within), [data-collapsed])) [data-element="Popover"] { translate: 0 0; } }
.tm0qs5m.tm0qs5m { display: flex; gap: 6px; flex-flow: column; }
.t1gos11j.t1gos11j { --handle-width: calc(var(--knob-width) - 2px); --knob-height: 22px; --knob-width: 30px; }
.t1y2rbyk.t1y2rbyk [data-element="Field"] { position: relative; }
.t1y2rbyk.t1y2rbyk [data-element="Knob"] { position: absolute; background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); translate: 0 -50%; width: var(--knob-width); min-width: initial; max-width: initial; height: var(--knob-height); min-height: initial; max-height: initial; border-radius: 9999rem; transition: transform var(--knob-duration) var(--knob-easing), scale var(--knob-duration) var(--knob-easing), --glass-fill-color var(--knob-duration), --glass-edge-color var(--knob-duration), box-shadow var(--knob-duration), backdrop-filter var(--knob-duration); pointer-events: none; }
@media (not (prefers-color-scheme: dark)) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked))) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked))) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="system"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:has(input[name="theme"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:has(input[name="theme"][value="dark"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:has(input[name="theme"][value="system"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="system"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked)) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: var(--white-color); } }
:where(:root:not([data-js])) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { inset: 50% auto auto calc(100% * var(--primary-hue) / 360 - var(--knob-width) / 2); }
:where(:root:has(input[name="highContrast"][value="on"]:checked)) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-fill-color: var(--white-color); }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { --glass-fill-color: var(--white-color); } }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: var(--white-color); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: var(--white-color); } }
.t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { backdrop-filter: blur(0px) saturate(1); box-shadow:  0 1px 3px color-mix(in oklab,var(--shadow-color) 40%,transparent),inset 0 0 0 transparent,inset 0 0 0 transparent; --knob-easing: ease-out; }
@media (prefers-reduced-motion: reduce) { .t1y2rbyk.t1y2rbyk [data-element="Knob"] { scale: 1; --knob-duration: 0ms; } }
@media (not (prefers-reduced-motion: reduce)) { .t1y2rbyk.t1y2rbyk:where(:not(:has([data-element="Option"]:active)):not(:has([data-hue-slider]:active))) [data-element="Knob"] { scale: 1; --knob-duration: 200ms; } }
.t1y2rbyk.t1y2rbyk [data-element="Knob"]::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.t1y2rbyk.t1y2rbyk [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; }
.t1y2rbyk.t1y2rbyk [data-element="Slider"]::-moz-range-thumb { width: var(--handle-width); min-width: initial; max-width: initial; height: var(--knob-height); min-height: initial; max-height: initial; border: 1px none var(--border-color); opacity: 0; cursor: pointer; }
.t1y2rbyk.t1y2rbyk [data-element="Slider"]::-moz-range-track { background-color: transparent; border: 1px none var(--border-color); }
.t1y2rbyk.t1y2rbyk label { position: relative; flex-grow: 1; flex-basis: 0; width: auto; min-width: 0; max-width: initial; height: 100%; min-height: initial; max-height: initial; cursor: pointer; }
.t1y2rbyk.t1y2rbyk 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: 1px none var(--border-color); opacity: 0; }
.t1y2rbyk.t1y2rbyk [data-element="Field"]::before { content: ""; position: absolute; inset: calc(calc(100% - 12px) / 2) 0; border-radius: 9999rem; 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%)); pointer-events: none; }
:where(:root:not([data-js])) .t1y2rbyk.t1y2rbyk input[type="range"] { display: none; }
.t1y2rbyk.t1y2rbyk input[type="range"] { position: relative; width: 100%; min-width: initial; max-width: initial; height: var(--knob-height); min-height: initial; max-height: initial; margin: 0px; appearance: none; border-radius: 9999rem; border: 1px none var(--border-color); background-color: transparent; }
.t1y2rbyk.t1y2rbyk input[type="range"]:where(:not([disabled])) { cursor: pointer; opacity: 1; }
.t1y2rbyk.t1y2rbyk input[type="range"]:where(:not(:focus-visible)) { outline: 3px none var(--outline-color); }
:where(:root:not([data-js])) .t1y2rbyk.t1y2rbyk [data-element="Track"] { display: flex; }
.t1y2rbyk.t1y2rbyk [data-element="Track"] { flex-flow: row; position: relative; width: 100%; min-width: initial; max-width: initial; height: var(--knob-height); min-height: initial; max-height: initial; border-radius: 9999rem; }
.t1y2rbyk.t1y2rbyk:where(:not(:has(input:focus-visible))) [data-element="Track"] { outline: 3px none var(--outline-color); }
.t1y2rbyk.t1y2rbyk [data-element="Slider"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--handle-width); min-width: initial; max-width: initial; height: var(--knob-height); min-height: initial; max-height: initial; opacity: 0; cursor: pointer; }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
@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)) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-edge-color: color-mix(in oklab, var(--white-color) 50%, transparent); --glass-fill-color: color-mix(in oklab, var(--surface-color) 30%, transparent); } }
:where(:root[data-js]) .t1y2rbyk.t1y2rbyk [data-element="Knob"] { inset: 50% auto auto calc(calc(var(--handle-width) - var(--knob-width)) / 2 + calc(100% - var(--handle-width)) * var(--primary-hue) / 360); }
@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))) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: color-mix(in oklab, var(--white-color) 15%, transparent); } }
@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))) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: color-mix(in oklab, var(--white-color) 15%, transparent); } }
@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))) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: color-mix(in oklab, var(--white-color) 15%, transparent); } }
@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))) .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { --glass-fill-color: color-mix(in oklab, var(--white-color) 15%, transparent); } }
.t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { backdrop-filter: blur(2px) saturate(1.6); box-shadow:  0 4px 12px color-mix(in oklab,var(--shadow-color) 80%,transparent),inset 0 1px 1px color-mix(in oklab, var(--white-color) 60%, transparent),inset 0 -1px 3px color-mix(in oklab, var(--black-color) 12%, transparent); --knob-easing: cubic-bezier(.3, 1.5, .5, 1); }
@media (not (prefers-reduced-motion: reduce)) { .t1y2rbyk.t1y2rbyk:where(:is(:has([data-element="Option"]:active), :has([data-hue-slider]:active))) [data-element="Knob"] { scale: 1.35; --knob-duration: 150ms; } }
:where(:root[data-js]) .t1y2rbyk.t1y2rbyk input[type="range"] { display: block; }
.t1y2rbyk.t1y2rbyk input[type="range"]:where([disabled]) { cursor: not-allowed; opacity: .4; }
.t1y2rbyk.t1y2rbyk input[type="range"]:where(:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
:where(:root[data-js]) .t1y2rbyk.t1y2rbyk [data-element="Track"] { display: none; }
.t1y2rbyk.t1y2rbyk:where(:has(input:focus-visible)) [data-element="Track"] { outline: 2px solid var(--focus-color); outline-offset: 1px; }
.tk1jh53.tk1jh53 { border: 1px none var(--border-color); background-color: var(--border-color); }
.t1c8r3tz.t1c8r3tz { height: 1px; min-height: initial; max-height: initial; margin: 0; }
.t159bfbt.t159bfbt { background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); border-radius: 9999rem; box-shadow:  0 1px 2px color-mix(in oklab,var(--shadow-color) 30%,transparent); }
.t159bfbt.t159bfbt:where(:not(:has(input:focus-visible:focus-within))) { outline: 3px none var(--outline-color); }
.t159bfbt.t159bfbt:where(:has(input:focus-visible:focus-within)) { outline: 2px solid var(--focus-color); outline-offset: 1px; }
.t15fmj59.t15fmj59 { padding: 2px; }
.t114w4pb.t114w4pb { display: flex; gap: 2px; flex-flow: row; }
.tm0q49y.tm0q49y { align-self: flex-start; position: relative; }
.t1wngccs.t1wngccs { --glass-edge-color: var(--glass-fill-color); }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="highContrast"][value="system"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="dark"]:checked)):not(:has(input[name="theme"][value="system"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="system"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:has(input[name="theme"][value="system"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (not (prefers-color-scheme: dark)) and (not (prefers-contrast: more)) { :where(:root:has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="system"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (not (prefers-color-scheme: dark)) and (prefers-contrast: more) { :where(:root:has(input[name="theme"][value="dark"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="system"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (not (prefers-contrast: more)) and (prefers-color-scheme: dark) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :where(:root:not(:has(input[name="theme"][value="system"]:checked)):has(input[name="theme"][value="dark"]:checked):not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .t1wngccs.t1wngccs { --glass-fill-color: var(--surface-2-color); } }
.tiy0fm9.tiy0fm9::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.tiy0fm9.tiy0fm9 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: 1px none var(--border-color); opacity: 0; }
.tiy0fm9.tiy0fm9 [data-element="Option"] { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: calc(4px + 1px) 8px; border-radius: 9999rem; transition: color 0.15s, background-color 0.15s, background-image 0.15s, --tasty-second-fill-color 0.15s; user-select: none; }
.tiy0fm9.tiy0fm9 [data-element="Option"]:where(:not(:has(input:checked)):not(:hover)) { color: var(--text-soft-color); --current-color: var(--text-soft-color); background-color: transparent; }
.tiy0fm9.tiy0fm9 [data-element="Option"]:where(:not(:has(input:checked)):hover) { background-color: color-mix(in oklab, var(--text-color) 4%, transparent); }
.tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)), .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:not(:has(input:checked)):hover) { color: var(--text-color); --current-color: var(--text-color); }
@media (not (prefers-contrast: more)) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked))) .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)) { background-color: color-mix(in oklab, var(--text-color) 8%, transparent); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="on"]:checked)):not(:has(input[name="highContrast"][value="system"]:checked))) .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)) { background-color: color-mix(in oklab, var(--text-color) 8%, transparent); } }
@media (prefers-contrast: more) { :where(:root:has(input[name="highContrast"][value="system"]:checked)) .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)) { background-color: color-mix(in oklab, var(--text-color) 16%, transparent); } }
@media (not (prefers-contrast: more)) { :where(:root:has(input[name="highContrast"][value="on"]:checked)) .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)) { background-color: color-mix(in oklab, var(--text-color) 16%, transparent); } }
@media (prefers-contrast: more) { :where(:root:not(:has(input[name="highContrast"][value="system"]:checked)):has(input[name="highContrast"][value="on"]:checked)) .tiy0fm9.tiy0fm9 [data-element="Option"]:where(:has(input:checked)) { background-color: color-mix(in oklab, var(--text-color) 16%, transparent); } }
.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; }