@property --type-w { syntax: ""; inherits: true; initial-value: 1280; } @property --type-t { syntax: ""; inherits: true; initial-value: 1; } @property --type-scale { syntax: ""; inherits: true; initial-value: 1; } @property --type-fluid-f { syntax: ""; inherits: true; initial-value: 1; } @property --type-anchor { syntax: ""; inherits: true; initial-value: 16px; } @property --type-s0 { syntax: ""; inherits: true; initial-value: 1; } @property --type-s1 { syntax: ""; inherits: true; initial-value: 1; } @property --space-xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-2xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-3xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-4xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-5xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-6xl { syntax: ""; inherits: true; initial-value: 0px; } html { background-color: oklch(1.0000000000000002 4.996003610813204e-16 180); } body { background-color: transparent; } [data-state-layout] .public-site { min-height: 0; } [data-state-layout], .public-site { --background: oklch(1.0000000000000002 4.996003610813204e-16 180); --foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --primary: oklch(0.5224867663283352 0.2549403959209367 280.3275220159064); --primary-foreground: oklch(0.95 0.005 280.3275220159064); --secondary: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --secondary-foreground: oklch(0.95 0.005 283.3998899253186); --accent: oklch(0.9490653330092141 0.02700715241253037 295.0521851980115); --accent-foreground: oklch(0.15 0.005 295.0521851980115); --muted: oklch(0.9715491859745754 0.013413305733386073 295.3241828006175); --muted-foreground: oklch(0.4532089549692911 0.06790046578791827 287.7287183367195); --border: oklch(0.9123964919235197 0.03549921073623009 294.5062075581065); --input: oklch(0.9123964919235197 0.03549921073623009 294.5062075581065); --ring: oklch(0.5224867663283352 0.2549403959209367 280.3275220159064); --destructive: oklch(0.5870440592241378 0.19793325294932407 25.763467035637788); --destructive-foreground: oklch(1.0000000000000002 4.996003610813204e-16 180); --card: oklch(1.0000000000000002 4.996003610813204e-16 180); --card-foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --popover: oklch(1.0000000000000002 4.996003610813204e-16 180); --popover-foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --color-background: oklch(1.0000000000000002 4.996003610813204e-16 180); --color-foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --color-primary: oklch(0.5224867663283352 0.2549403959209367 280.3275220159064); --color-primary-foreground: oklch(0.95 0.005 280.3275220159064); --color-secondary: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --color-secondary-foreground: oklch(0.95 0.005 283.3998899253186); --color-accent: oklch(0.9490653330092141 0.02700715241253037 295.0521851980115); --color-accent-foreground: oklch(0.15 0.005 295.0521851980115); --color-muted: oklch(0.9715491859745754 0.013413305733386073 295.3241828006175); --color-muted-foreground: oklch(0.4532089549692911 0.06790046578791827 287.7287183367195); --color-border: oklch(0.9123964919235197 0.03549921073623009 294.5062075581065); --color-input: oklch(0.9123964919235197 0.03549921073623009 294.5062075581065); --color-ring: oklch(0.5224867663283352 0.2549403959209367 280.3275220159064); --color-destructive: oklch(0.5870440592241378 0.19793325294932407 25.763467035637788); --color-destructive-foreground: oklch(1.0000000000000002 4.996003610813204e-16 180); --color-card: oklch(1.0000000000000002 4.996003610813204e-16 180); --color-card-foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --color-popover: oklch(1.0000000000000002 4.996003610813204e-16 180); --color-popover-foreground: oklch(0.19370571060733419 0.07178953798124107 283.3998899253186); --font-heading: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", "Plus Jakarta Sans Fallback Android", system-ui, sans-serif; --font-body: "Inter", "Inter Fallback", "Inter Fallback Android", system-ui, sans-serif; --type-w: 375; --type-t: clamp(0, calc((var(--type-w) - 375) / 905), 1); --type-scale: calc((16 + (17 - 16) * var(--type-t)) / 16); --type-s0: 1; --type-s1: 1.0625; --type-fluid-f: calc(0.65 + 0.35 * var(--type-t)); --type-anchor: calc(1rem * var(--type-scale)); font-size: calc(1rem * var(--type-scale)); --radius: 1rem; --radius-pill: 9999px; --density-scale: 1; --shadow-scale: 0.5; --border-treatment: subtle; --control-border-width: 1px; --type-poster-font: var(--font-heading); --type-poster-size: 6rem; --type-poster-weight: 800; --type-poster-line-height: 0.9; --type-poster-tracking: -0.03em; --type-display-font: var(--font-heading); --type-display-size: 3rem; --type-display-weight: 800; --type-display-line-height: 1.05; --type-display-tracking: -0.02em; --type-heading-font: var(--font-heading); --type-heading-size: 2rem; --type-heading-weight: 700; --type-heading-line-height: 1.2; --type-heading-tracking: -0.012em; --type-subhead-font: var(--font-heading); --type-subhead-size: 1.5625rem; --type-subhead-weight: 600; --type-subhead-line-height: 1.3; --type-subhead-tracking: 0; --type-eyebrow-font: var(--font-body); --type-eyebrow-size: 0.8125rem; --type-eyebrow-weight: 600; --type-eyebrow-line-height: 1.4; --type-eyebrow-tracking: 0.1em; --type-lead-font: var(--font-body); --type-lead-size: 1.25rem; --type-lead-weight: 400; --type-lead-line-height: 1.5; --type-lead-tracking: 0; --type-lead-measure: 60ch; --type-quote-font: var(--font-body); --type-quote-size: 1.25rem; --type-quote-weight: 400; --type-quote-line-height: 1.5; --type-quote-tracking: 0; --type-quote-measure: 60ch; --type-body-font: var(--font-body); --type-body-size: 1rem; --type-body-weight: 400; --type-body-line-height: 1.6; --type-body-tracking: 0; --type-body-measure: 65ch; --type-caption-font: var(--font-body); --type-caption-size: 0.8125rem; --type-caption-weight: 500; --type-caption-line-height: 1.5; --type-caption-tracking: 0; --shadow-none: none; --shadow-ring: 0 0 0 2px var(--primary); --shadow-insetRing: 0 0 0 2px var(--primary) inset; --shadow-offsetRing: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); --shadow-soft: 0 1px 1.5px 0 oklch(from var(--foreground) l c h / 0.1); --shadow-raised: 0 4px 4px 0 oklch(from var(--foreground) l c h / 0.12); --shadow-floating: 0 10px 10px -1.5px oklch(from var(--foreground) l c h / 0.15), 0 4px 3px -2px oklch(from var(--foreground) l c h / 0.1); --shadow-modal: 0 25px 25px -6px oklch(from var(--foreground) l c h / 0.25); --space-none: 0; --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 0.75rem; --space-l: 1rem; --space-xl: calc(1rem * (1.3973 + (1.5 - 1.3973) * var(--type-t))); --space-2xl: calc(1rem * (1.7715 + (2 - 1.7715) * var(--type-t))); --space-3xl: calc(1rem * (2.4753 + (3 - 2.4753) * var(--type-t))); --space-4xl: calc(1rem * (3.1383 + (4 - 3.1383) * var(--type-t))); --space-5xl: calc(1rem * (4.3851 + (6 - 4.3851) * var(--type-t))); --space-6xl: calc(1rem * (5.5597 + (8 - 5.5597) * var(--type-t))); color: var(--foreground); font-family: var(--font-body); color-scheme: light; } [data-state-layout] h4, [data-state-layout] h5, [data-state-layout] h6, .public-site h4, .public-site h5, .public-site h6 { font-family: var(--font-heading); } :where([data-state-layout], .public-site) h1 { font-family: var(--type-display-font); font-size: calc(var(--type-s0) * 2.4753rem + (var(--type-display-size) * var(--type-s1) - var(--type-s0) * 2.4753rem) * var(--type-t)); font-weight: var(--type-display-weight); line-height: calc(var(--type-display-line-height) + 0.0583 * (1 - var(--type-t))); letter-spacing: var(--type-display-tracking); } :where([data-state-layout], .public-site) h2 { font-family: var(--type-heading-font); font-size: calc(var(--type-s0) * 1.7715rem + (var(--type-heading-size) * var(--type-s1) - var(--type-s0) * 1.7715rem) * var(--type-t)); font-weight: var(--type-heading-weight); line-height: calc(var(--type-heading-line-height) + 0.0548 * (1 - var(--type-t))); letter-spacing: var(--type-heading-tracking); } :where([data-state-layout], .public-site) h3 { font-family: var(--type-subhead-font); font-size: calc(var(--type-s0) * 1.4451rem + (var(--type-subhead-size) * var(--type-s1) - var(--type-s0) * 1.4451rem) * var(--type-t)); font-weight: var(--type-subhead-weight); line-height: calc(var(--type-subhead-line-height) + 0.0426 * (1 - var(--type-t))); letter-spacing: var(--type-subhead-tracking); } :where([data-state-layout], .public-site) blockquote { font-family: var(--type-quote-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-quote-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-quote-weight); line-height: calc(var(--type-quote-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-quote-tracking); font-style: italic; max-width: var(--type-quote-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) p { font-family: var(--type-body-font); font-size: calc(var(--type-s0) * 1rem + (var(--type-body-size) * var(--type-s1) - var(--type-s0) * 1rem) * var(--type-t)); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-tracking); max-width: var(--type-body-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-poster { font-family: var(--type-poster-font); font-size: calc(var(--type-s0) * 4.3851rem + (var(--type-poster-size) * var(--type-s1) - var(--type-s0) * 4.3851rem) * var(--type-t)); font-weight: var(--type-poster-weight); line-height: calc(var(--type-poster-line-height) + 0.046 * (1 - var(--type-t))); letter-spacing: var(--type-poster-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-poster { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-display { font-family: var(--type-display-font); font-size: calc(var(--type-s0) * 2.4753rem + (var(--type-display-size) * var(--type-s1) - var(--type-s0) * 2.4753rem) * var(--type-t)); font-weight: var(--type-display-weight); line-height: calc(var(--type-display-line-height) + 0.0583 * (1 - var(--type-t))); letter-spacing: var(--type-display-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-display { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-heading { font-family: var(--type-heading-font); font-size: calc(var(--type-s0) * 1.7715rem + (var(--type-heading-size) * var(--type-s1) - var(--type-s0) * 1.7715rem) * var(--type-t)); font-weight: var(--type-heading-weight); line-height: calc(var(--type-heading-line-height) + 0.0548 * (1 - var(--type-t))); letter-spacing: var(--type-heading-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-heading { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-subhead { font-family: var(--type-subhead-font); font-size: calc(var(--type-s0) * 1.4451rem + (var(--type-subhead-size) * var(--type-s1) - var(--type-s0) * 1.4451rem) * var(--type-t)); font-weight: var(--type-subhead-weight); line-height: calc(var(--type-subhead-line-height) + 0.0426 * (1 - var(--type-t))); letter-spacing: var(--type-subhead-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-subhead { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-eyebrow { font-family: var(--type-eyebrow-font); font-size: calc(var(--type-s0) * 0.8125rem + (var(--type-eyebrow-size) * var(--type-s1) - var(--type-s0) * 0.8125rem) * var(--type-t)); font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-line-height); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-eyebrow { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-lead { font-family: var(--type-lead-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-lead-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-lead-weight); line-height: calc(var(--type-lead-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-lead-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-lead { max-width: var(--type-lead-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-quote { font-family: var(--type-quote-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-quote-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-quote-weight); line-height: calc(var(--type-quote-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-quote-tracking); font-style: italic; } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-quote { max-width: var(--type-quote-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-body { font-family: var(--type-body-font); font-size: calc(var(--type-s0) * 1rem + (var(--type-body-size) * var(--type-s1) - var(--type-s0) * 1rem) * var(--type-t)); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-body { max-width: var(--type-body-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-caption { font-family: var(--type-caption-font); font-size: calc(var(--type-s0) * 0.8125rem + (var(--type-caption-size) * var(--type-s1) - var(--type-s0) * 0.8125rem) * var(--type-t)); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-caption { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .layout-stack { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-centered { display: flex; flex-direction: column; justify-content: center; align-items: center; } :where([data-state-layout], .public-site) .layout-split { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } :where([data-state-layout], .public-site) .layout-cluster { display: flex; flex-direction: row; justify-content: center; align-items: center; } :where([data-state-layout], .public-site) .layout-spread { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } :where([data-state-layout], .public-site) .layout-grid-2 { display: grid; justify-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-grid-3 { display: grid; justify-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-grid-4 { display: grid; justify-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-sidebar { display: grid; justify-items: start; grid-template-columns: 240px 1fr; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-rail { display: grid; justify-items: start; grid-template-columns: 1fr 240px; align-items: flex-start; } @layer components { :where([data-state-layout], .public-site) button[data-component-id], :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger), :where([data-state-layout], .public-site) [data-ck-button] { font: inherit; color: inherit; transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) button[data-component-id]:where(:active), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:active), :where([data-state-layout], .public-site) [data-ck-button]:where(:active) { transform: translateY(1px); } :where([data-state-layout], .public-site) button[data-component-id]:where(:focus-visible), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:focus-visible), :where([data-state-layout], .public-site) [data-ck-button]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) button[data-component-id]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) [data-ck-button]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) :is(button, a)[data-component-id]:is(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger), :where([data-state-layout], .public-site) [data-ck-button] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-pill, 0.5rem); font-weight: 500; text-decoration: none; min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-sm { min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-md { min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-lg { min-height: calc(2.5rem * var(--density-scale, 1)); padding-inline: calc(1.5rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-primary, :where([data-state-layout], .public-site) [data-ck-button="primary"] { background: var(--primary); color: var(--primary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-primary:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="primary"]:where(:hover) { background: color-mix(in oklab, var(--primary) 90%, transparent); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-secondary, :where([data-state-layout], .public-site) [data-ck-button="secondary"] { background: var(--secondary); color: var(--secondary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-secondary:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="secondary"]:where(:hover) { background: color-mix(in oklab, var(--secondary) 80%, transparent); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-outline, :where([data-state-layout], .public-site) [data-ck-button="outline"] { background: var(--background); border-color: var(--input); color: var(--foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-outline:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="outline"]:where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-quiet, :where([data-state-layout], .public-site) [data-ck-button="quiet"] { background: transparent; } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-quiet:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="quiet"]:where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-link, :where([data-state-layout], .public-site) [data-ck-button="link"] { background: transparent; color: var(--primary); text-underline-offset: 4px; padding-inline: 0; min-height: 0; } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-link:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="link"]:where(:hover) { text-decoration: underline; } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-danger, :where([data-state-layout], .public-site) [data-ck-button="danger"] { background: var(--destructive); color: var(--destructive-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-danger:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="danger"]:where(:hover) { background: color-mix(in oklab, var(--destructive) 90%, transparent); } } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id], :where([data-state-layout], .public-site) [data-ck-field] { font: inherit; color: inherit; min-width: 0; transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) [data-ck-field] { background: transparent; min-height: calc(2.25rem * var(--density-scale, 1)); padding: calc(0.25rem * var(--density-scale, 1)) calc(0.75rem * var(--density-scale, 1)); border: var(--control-border-width, 1px) solid var(--input); border-radius: var(--radius-pill, 0.5rem); } :where([data-state-layout], .public-site) textarea[data-component-id]:where(:not([data-ck-own])) { min-height: calc(4rem * var(--density-scale, 1)); padding-block: calc(0.5rem * var(--density-scale, 1)); border-radius: var(--radius, 0.5rem); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id].control-sm, :where([data-state-layout], .public-site) [data-ck-field].control-sm { min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.5rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id].control-md, :where([data-state-layout], .public-site) [data-ck-field].control-md { min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id].control-lg, :where([data-state-layout], .public-site) [data-ck-field].control-lg { min-height: calc(2.5rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id]::placeholder, :where([data-state-layout], .public-site) [data-ck-field]::placeholder { color: var(--muted-foreground); opacity: 1; } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id]:where([aria-invalid="true"], :user-invalid), :where([data-state-layout], .public-site) [data-ck-field]:where([aria-invalid="true"], :user-invalid) { border-color: var(--destructive); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id]:where(:focus-visible), :where([data-state-layout], .public-site) [data-ck-field]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; border-color: var(--ring); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"])[data-component-id]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) [data-ck-field]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id] { accent-color: var(--primary); width: 1rem; height: 1rem; } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) [data-ck-chip] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; font: inherit; font-weight: 500; min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); border: 1px solid var(--input); border-radius: var(--radius-pill, 0.5rem); background: var(--background); color: var(--foreground); cursor: pointer; transition: color 150ms, background-color 150ms, border-color 150ms; } @media (hover: hover) { :where([data-state-layout], .public-site) [data-ck-chip]:where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) [data-ck-chip][aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) [data-ck-chip][aria-pressed="true"]:where(:hover) { background: color-mix(in oklab, var(--primary) 90%, transparent); } } :where([data-state-layout], .public-site) [data-ck-chip]:where(:active) { transform: translateY(1px); } :where([data-state-layout], .public-site) [data-ck-chip]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) [data-ck-chip]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } } @media (min-width: 407px) { [data-state-layout], .public-site { --type-w: 407; } } @media (min-width: 439px) { [data-state-layout], .public-site { --type-w: 439; } } @media (min-width: 471px) { [data-state-layout], .public-site { --type-w: 471; } } @media (min-width: 503px) { [data-state-layout], .public-site { --type-w: 503; } } @media (min-width: 535px) { [data-state-layout], .public-site { --type-w: 535; } } @media (min-width: 567px) { [data-state-layout], .public-site { --type-w: 567; } } @media (min-width: 599px) { [data-state-layout], .public-site { --type-w: 599; } } @media (min-width: 631px) { [data-state-layout], .public-site { --type-w: 631; } } @media (min-width: 663px) { [data-state-layout], .public-site { --type-w: 663; } } @media (min-width: 695px) { [data-state-layout], .public-site { --type-w: 695; } } @media (min-width: 727px) { [data-state-layout], .public-site { --type-w: 727; } } @media (min-width: 759px) { [data-state-layout], .public-site { --type-w: 759; } } @media (min-width: 791px) { [data-state-layout], .public-site { --type-w: 791; } } @media (min-width: 823px) { [data-state-layout], .public-site { --type-w: 823; } } @media (min-width: 855px) { [data-state-layout], .public-site { --type-w: 855; } } @media (min-width: 887px) { [data-state-layout], .public-site { --type-w: 887; } } @media (min-width: 919px) { [data-state-layout], .public-site { --type-w: 919; } } @media (min-width: 951px) { [data-state-layout], .public-site { --type-w: 951; } } @media (min-width: 983px) { [data-state-layout], .public-site { --type-w: 983; } } @media (min-width: 1015px) { [data-state-layout], .public-site { --type-w: 1015; } } @media (min-width: 1047px) { [data-state-layout], .public-site { --type-w: 1047; } } @media (min-width: 1079px) { [data-state-layout], .public-site { --type-w: 1079; } } @media (min-width: 1111px) { [data-state-layout], .public-site { --type-w: 1111; } } @media (min-width: 1143px) { [data-state-layout], .public-site { --type-w: 1143; } } @media (min-width: 1175px) { [data-state-layout], .public-site { --type-w: 1175; } } @media (min-width: 1207px) { [data-state-layout], .public-site { --type-w: 1207; } } @media (min-width: 1239px) { [data-state-layout], .public-site { --type-w: 1239; } } @media (min-width: 1271px) { [data-state-layout], .public-site { --type-w: 1271; } } @media (min-width: 1280px) { [data-state-layout], .public-site { --type-w: 1280; } }