@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-border-bottom-opacity:100%;--un-border-opacity:100%;--un-border-style:solid;--un-divide-opacity:100%;--un-divide-y-reverse:initial;--un-from-opacity:100%;--un-leading:initial;--un-line-opacity:100%;--un-ring-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-shadow-opacity:100%;--un-text-opacity:100%;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;}}@property --un-text-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-leading{syntax:"*";inherits:false;}@property --un-border-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-border-bottom-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-line-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-ring-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-offset-width{syntax:"";inherits:false;initial-value:0px;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-shadow-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0;}@property --un-scale-x{syntax:"*";inherits:false;initial-value:1;}@property --un-scale-y{syntax:"*";inherits:false;initial-value:1;}@property --un-scale-z{syntax:"*";inherits:false;initial-value:1;}@property --un-from-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-gradient-from{syntax:"";inherits:false;initial-value:#0000;}@property --un-gradient-from-position{syntax:"";inherits:false;initial-value:0%;}@property --un-gradient-position{syntax:"*";inherits:false;}@property --un-gradient-stops{syntax:"*";inherits:false;}@property --un-gradient-to{syntax:"";inherits:false;initial-value:#0000;}@property --un-gradient-to-position{syntax:"";inherits:false;initial-value:100%;}@property --un-gradient-via{syntax:"";inherits:false;initial-value:#0000;}@property --un-gradient-via-position{syntax:"";inherits:false;initial-value:50%;}@property --un-gradient-via-stops{syntax:"*";inherits:false;}@property --un-numeric-figure{syntax:"*";inherits:false;}@property --un-numeric-fraction{syntax:"*";inherits:false;}@property --un-numeric-spacing{syntax:"*";inherits:false;}@property --un-ordinal{syntax:"*";inherits:false;}@property --un-slashed-zero{syntax:"*";inherits:false;}@property --un-divide-opacity{syntax:"";inherits:false;initial-value:100%;}@property --un-border-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-divide-y-reverse{syntax:"*";inherits:false;initial-value:0;} *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var( --default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); font-feature-settings: var(--default-font-featureSettings, normal); font-variation-settings: var(--default-font-variationSettings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); font-feature-settings: var(--default-monoFont-featureSettings, normal); font-variation-settings: var(--default-monoFont-variationSettings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }:root, :host { --spacing: 0.25rem; --font-body: var(--f-body), system-ui, sans-serif; --fontWeight-bold: 700; --font-head: var(--f-head), Georgia, serif; --fontWeight-medium: 500; --fontWeight-semibold: 600; --leading-none: 1; --leading-relaxed: 1.625; --leading-tight: 1.25; --container-3xl: 48rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --container-md: 28rem; --container-sm: 24rem; --container-xl: 36rem; --container-xs: 20rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --colors-white: #fff; --colors-dark: var(--c-dark); --text-2xl-fontSize: 1.5rem; --text-2xl-lineHeight: 2rem; --text-3xl-fontSize: 1.875rem; --text-3xl-lineHeight: 2.25rem; --text-lg-fontSize: 1.125rem; --text-lg-lineHeight: 1.75rem; --text-sm-fontSize: 0.875rem; --text-sm-lineHeight: 1.25rem; --text-xl-fontSize: 1.25rem; --text-xl-lineHeight: 1.75rem; --text-xs-fontSize: 0.75rem; --text-xs-lineHeight: 1rem; --text-4xl-fontSize: 2.25rem; --text-4xl-lineHeight: 2.5rem; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }.text-2xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));}.text-3xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-3xl-fontSize);line-height:var(--un-leading, var(--text-3xl-lineHeight));}.text-lg:where(:not([data-skin],[data-skin] *)){font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight));}.text-sm:where(:not([data-skin],[data-skin] *)){font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));}.text-xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-xl-fontSize);line-height:var(--un-leading, var(--text-xl-lineHeight));}.text-xs:where(:not([data-skin],[data-skin] *)){font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));}.aria-\[current\=page\]\:text-\[var\(--c-accent\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-accent) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-\[var\(--c-bg\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-bg) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-\[var\(--c-dark\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-dark) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-\[var\(--c-primary\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-primary) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-\[var\(--c-secondary\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-secondary) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-\[var\(--c-surface\)\][aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-surface) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-accent) var(--un-text-opacity), transparent);}.aria-\[current\=page\]\:text-on-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-accent) var(--un-text-opacity), transparent);}.text-\[0\.66rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.66rem;}.text-\[0\.68rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.68rem;}.text-\[0\.72rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.72rem;}.text-\[0\.74rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.74rem;}.text-\[0\.76rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.76rem;}.text-\[0\.78rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.78rem;}.text-\[0\.7rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.7rem;}.text-\[0\.82rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.82rem;}.text-\[0\.84rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.84rem;}.text-\[0\.86rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.86rem;}.text-\[0\.875rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.875rem;}.text-\[0\.88rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.88rem;}.text-\[0\.8rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.8rem;}.text-\[0\.92rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.92rem;}.text-\[0\.94rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.94rem;}.text-\[0\.95rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.95rem;}.text-\[0\.98rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.98rem;}.text-\[0\.9rem\]:where(:not([data-skin],[data-skin] *)){font-size:0.9rem;}.text-\[1\.02rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.02rem;}.text-\[1\.05rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.05rem;}.text-\[1\.15rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.15rem;}.text-\[1\.1rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.1rem;}.text-\[1\.25rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.25rem;}.text-\[1\.2rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.2rem;}.text-\[1\.35rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.35rem;}.text-\[1\.3rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.3rem;}.text-\[1\.45rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.45rem;}.text-\[1\.4rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.4rem;}.text-\[1\.5rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.5rem;}.text-\[1\.6rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.6rem;}.text-\[1\.7rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.7rem;}.text-\[15px\]:where(:not([data-skin],[data-skin] *)){font-size:15px;}.text-\[1rem\]:where(:not([data-skin],[data-skin] *)){font-size:1rem;}.text-\[2rem\]:where(:not([data-skin],[data-skin] *)){font-size:2rem;}.text-\[clamp\(1\.3rem\,2\.2vw\,1\.6rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.3rem,2.2vw,1.6rem);}.text-\[clamp\(1\.3rem\,2\.2vw\,1\.7rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.3rem,2.2vw,1.7rem);}.text-\[clamp\(1\.4rem\,2\.4vw\,1\.75rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.4rem,2.4vw,1.75rem);}.text-\[clamp\(1\.6rem\,2\.8vw\,2\.1rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.6rem,2.8vw,2.1rem);}.text-\[clamp\(1\.6rem\,3\.4vw\,2\.6rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.6rem,3.4vw,2.6rem);}.text-\[clamp\(1\.9rem\,3\.6vw\,2\.6rem\)\]:where(:not([data-skin],[data-skin] *)){font-size:clamp(1.9rem,3.6vw,2.6rem);}.text-\[var\(--c-accent\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-accent) var(--un-text-opacity), transparent);}.text-\[var\(--c-bg\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-bg) var(--un-text-opacity), transparent);}.text-\[var\(--c-dark\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-dark) var(--un-text-opacity), transparent);}.text-\[var\(--c-primary\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-primary) var(--un-text-opacity), transparent);}.text-\[var\(--c-secondary\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-secondary) var(--un-text-opacity), transparent);}.text-\[var\(--c-surface\)\]:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-surface) var(--un-text-opacity), transparent);}.text-accent:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-accent) var(--un-text-opacity), transparent);}.text-ink:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-text) var(--un-text-opacity), transparent);}.text-muted:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-muted) var(--un-text-opacity), transparent);}.text-on-accent:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-accent) var(--un-text-opacity), transparent);}.text-on-base:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-base) var(--un-text-opacity), transparent);}.text-on-dark:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-dark) var(--un-text-opacity), transparent);}.text-on-primary:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-primary) var(--un-text-opacity), transparent);}.text-on-secondary:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-secondary) var(--un-text-opacity), transparent);}.text-on-surface:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--on-surface) var(--un-text-opacity), transparent);}.text-primary:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-primary) var(--un-text-opacity), transparent);}.text-white:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent);}.text-white\/80:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--colors-white) 80%, transparent);}.hover\:text-\[var\(--c-accent\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-accent) var(--un-text-opacity), transparent);}.hover\:text-\[var\(--c-bg\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-bg) var(--un-text-opacity), transparent);}.hover\:text-\[var\(--c-dark\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-dark) var(--un-text-opacity), transparent);}.hover\:text-\[var\(--c-primary\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-primary) var(--un-text-opacity), transparent);}.hover\:text-\[var\(--c-secondary\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-secondary) var(--un-text-opacity), transparent);}.hover\:text-\[var\(--c-surface\)\]:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--c-surface) var(--un-text-opacity), transparent);}.hover\:text-dark:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-dark) var(--un-text-opacity), transparent);}.hover\:text-primary:hover:where(:not([data-skin],[data-skin] *)){color:color-mix(in srgb, var(--c-primary) var(--un-text-opacity), transparent);}.leading-\[1\.1\]:where(:not([data-skin],[data-skin] *)){--un-leading:1.1;line-height:1.1;}.leading-\[1\.15\]:where(:not([data-skin],[data-skin] *)){--un-leading:1.15;line-height:1.15;}.leading-none:where(:not([data-skin],[data-skin] *)){--un-leading:var(--leading-none);line-height:var(--leading-none);}.leading-relaxed:where(:not([data-skin],[data-skin] *)){--un-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);}.leading-tight:where(:not([data-skin],[data-skin] *)){--un-leading:var(--leading-tight);line-height:var(--leading-tight);}.tracking-\[0\.01em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.01em;letter-spacing:0.01em;}.tracking-\[0\.02em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.02em;letter-spacing:0.02em;}.tracking-\[0\.08em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.08em;letter-spacing:0.08em;}.tracking-\[0\.12em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.12em;letter-spacing:0.12em;}.tracking-\[0\.14em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.14em;letter-spacing:0.14em;}.tracking-\[0\.16em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.16em;letter-spacing:0.16em;}.tracking-\[0\.18em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.18em;letter-spacing:0.18em;}.tracking-\[0\.22em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.22em;letter-spacing:0.22em;}.tracking-\[0\.24em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.24em;letter-spacing:0.24em;}.tracking-\[0\.2em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.2em;letter-spacing:0.2em;}.font-body:where(:not([data-skin],[data-skin] *)){font-family:var(--font-body);}.font-bold:where(:not([data-skin],[data-skin] *)){--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);}.font-head:where(:not([data-skin],[data-skin] *)){font-family:var(--font-head);}.font-medium:where(:not([data-skin],[data-skin] *)){--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);}.font-semibold:where(:not([data-skin],[data-skin] *)){--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);}.mx-auto:where(:not([data-skin],[data-skin] *)){margin-inline:auto;}.-mb-px:where(:not([data-skin],[data-skin] *)){margin-bottom:-1px;}.-me-2:where(:not([data-skin],[data-skin] *)){margin-inline-end:calc(var(--spacing) * -2);}.-ms-2:where(:not([data-skin],[data-skin] *)){margin-inline-start:calc(var(--spacing) * -2);}.mb-2:where(:not([data-skin],[data-skin] *)){margin-bottom:calc(var(--spacing) * 2);}.mb-3:where(:not([data-skin],[data-skin] *)){margin-bottom:calc(var(--spacing) * 3);}.mb-8:where(:not([data-skin],[data-skin] *)){margin-bottom:calc(var(--spacing) * 8);}.me-3:where(:not([data-skin],[data-skin] *)){margin-inline-end:calc(var(--spacing) * 3);}.ms-auto:where(:not([data-skin],[data-skin] *)){margin-inline-start:auto;}.mt-1:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 1);}.mt-1\.5:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 1.5);}.mt-10:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 10);}.mt-2:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 2);}.mt-2\.5:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 2.5);}.mt-3:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 3);}.mt-4:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 4);}.mt-5:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 5);}.mt-6:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 6);}.mt-7:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 7);}.mt-8:where(:not([data-skin],[data-skin] *)){margin-top:calc(var(--spacing) * 8);}.mt-px:where(:not([data-skin],[data-skin] *)){margin-top:1px;}.p-2:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 2);}.p-3:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 3);}.p-3\.5:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 3.5);}.p-5:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 5);}.px-10:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 10);}.px-3:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 3);}.px-3\.5:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 3.5);}.px-4:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 4);}.px-5:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 5);}.px-6:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 6);}.px-7:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 7);}.px-8:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 8);}.py-1\.5:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 1.5);}.py-10:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 10);}.py-12:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 12);}.py-14:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 14);}.py-16:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 16);}.py-2:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 2);}.py-2\.5:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 2.5);}.py-3:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 3);}.py-3\.5:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 3.5);}.py-4:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 4);}.py-5:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 5);}.py-6:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 6);}.py-7:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 7);}.py-8:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 8);}.py-9:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 9);}.pb-\[4\.5rem\]:where(:not([data-skin],[data-skin] *)){padding-bottom:4.5rem;}.pb-1:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 1);}.pb-10:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 10);}.pb-14:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 14);}.pb-16:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 16);}.pb-20:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 20);}.pb-24:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 24);}.pb-4:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 4);}.pb-5:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 5);}.pb-7:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 7);}.pb-8:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 8);}.pe-10:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 10);}.pe-2:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 2);}.pe-2\.5:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 2.5);}.pe-4:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 4);}.pe-5:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 5);}.pe-8:where(:not([data-skin],[data-skin] *)){padding-inline-end:calc(var(--spacing) * 8);}.ps-5:where(:not([data-skin],[data-skin] *)){padding-inline-start:calc(var(--spacing) * 5);}.ps-6:where(:not([data-skin],[data-skin] *)){padding-inline-start:calc(var(--spacing) * 6);}.ps-7:where(:not([data-skin],[data-skin] *)){padding-inline-start:calc(var(--spacing) * 7);}.pt-10:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 10);}.pt-12:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 12);}.pt-2:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 2);}.pt-3:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 3);}.pt-4:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 4);}.pt-5:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 5);}.pt-6:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 6);}.pt-9:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 9);}.text-center:where(:not([data-skin],[data-skin] *)){text-align:center;}.text-end:where(:not([data-skin],[data-skin] *)){text-align:end;}.outline-none:where(:not([data-skin],[data-skin] *)){--un-outline-style:none;outline-style:none;}.border:where(:not([data-skin],[data-skin] *)){border-width:1px;}.border-y:where(:not([data-skin],[data-skin] *)){border-block-width:1px;}.border-b:where(:not([data-skin],[data-skin] *)){border-bottom-width:1px;}.border-e:where(:not([data-skin],[data-skin] *)){border-inline-end-width:1px;}.border-s:where(:not([data-skin],[data-skin] *)){border-inline-start-width:1px;}.border-t:where(:not([data-skin],[data-skin] *)){border-top-width:1px;}.aria-\[current\=page\]\:border-transparent[aria-current=page]:where(:not([data-skin],[data-skin] *)){border-color:transparent;}.border-2:where(:not([data-skin],[data-skin] *)){border-width:2px;}.border-accent:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--c-accent) var(--un-border-opacity), transparent);}.border-ink\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--c-text) 10%, transparent);}.border-ink\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--c-text) 20%, transparent);}.border-on-accent:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) var(--un-border-opacity), transparent);}.border-on-accent\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 10%, transparent);}.border-on-accent\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 15%, transparent);}.border-on-accent\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 20%, transparent);}.border-on-accent\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 25%, transparent);}.border-on-accent\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 30%, transparent);}.border-on-accent\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 40%, transparent);}.border-on-accent\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 50%, transparent);}.border-on-accent\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 60%, transparent);}.border-on-base:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) var(--un-border-opacity), transparent);}.border-on-base\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 10%, transparent);}.border-on-base\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 15%, transparent);}.border-on-base\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 20%, transparent);}.border-on-base\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 25%, transparent);}.border-on-base\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 30%, transparent);}.border-on-base\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 40%, transparent);}.border-on-base\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 50%, transparent);}.border-on-base\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 60%, transparent);}.border-on-dark:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) var(--un-border-opacity), transparent);}.border-on-dark\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 10%, transparent);}.border-on-dark\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 15%, transparent);}.border-on-dark\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 20%, transparent);}.border-on-dark\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 25%, transparent);}.border-on-dark\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 30%, transparent);}.border-on-dark\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 40%, transparent);}.border-on-dark\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 50%, transparent);}.border-on-dark\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 60%, transparent);}.border-on-primary:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) var(--un-border-opacity), transparent);}.border-on-primary\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 10%, transparent);}.border-on-primary\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 15%, transparent);}.border-on-primary\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 20%, transparent);}.border-on-primary\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 25%, transparent);}.border-on-primary\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 30%, transparent);}.border-on-primary\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 40%, transparent);}.border-on-primary\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 50%, transparent);}.border-on-primary\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 60%, transparent);}.border-on-secondary:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) var(--un-border-opacity), transparent);}.border-on-secondary\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 10%, transparent);}.border-on-secondary\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 15%, transparent);}.border-on-secondary\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 20%, transparent);}.border-on-secondary\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 25%, transparent);}.border-on-secondary\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 30%, transparent);}.border-on-secondary\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 40%, transparent);}.border-on-secondary\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 50%, transparent);}.border-on-secondary\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 60%, transparent);}.border-on-surface:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) var(--un-border-opacity), transparent);}.border-on-surface\/10:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 10%, transparent);}.border-on-surface\/15:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 15%, transparent);}.border-on-surface\/20:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 20%, transparent);}.border-on-surface\/25:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 25%, transparent);}.border-on-surface\/30:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 30%, transparent);}.border-on-surface\/40:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 40%, transparent);}.border-on-surface\/50:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 50%, transparent);}.border-on-surface\/60:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 60%, transparent);}.border-transparent:where(:not([data-skin],[data-skin] *)){border-color:transparent;}.hover\:border-on-accent\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-accent) 60%, transparent);}.hover\:border-on-base\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-base) 60%, transparent);}.hover\:border-on-dark\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-dark) 60%, transparent);}.hover\:border-on-primary\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-primary) 60%, transparent);}.hover\:border-on-secondary\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-secondary) 60%, transparent);}.hover\:border-on-surface\/60:hover:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--on-surface) 60%, transparent);}.focus\:border-primary:focus:where(:not([data-skin],[data-skin] *)){border-color:color-mix(in srgb, var(--c-primary) var(--un-border-opacity), transparent);}.border-y-2:where(:not([data-skin],[data-skin] *)){border-block-width:2px;}.aria-\[current\=page\]\:border-b-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){border-bottom-color:color-mix(in srgb, var(--c-accent) var(--un-border-bottom-opacity), transparent);--un-border-bottom-opacity:var(--un-border-opacity);}.border-b-\[3px\]:where(:not([data-skin],[data-skin] *)){border-bottom-width:3px;}.border-b-2:where(:not([data-skin],[data-skin] *)){border-bottom-width:2px;}.border-b-4:where(:not([data-skin],[data-skin] *)){border-bottom-width:4px;}.border-s-\[6px\]:where(:not([data-skin],[data-skin] *)){border-inline-start-width:6px;}.border-t-\[3px\]:where(:not([data-skin],[data-skin] *)){border-top-width:3px;}.border-t-2:where(:not([data-skin],[data-skin] *)){border-top-width:2px;}.last\:border-e-0:last-child:where(:not([data-skin],[data-skin] *)){border-inline-end-width:0px;}.rounded-2xl:where(:not([data-skin],[data-skin] *)){border-radius:var(--radius-2xl);}.rounded-3xl:where(:not([data-skin],[data-skin] *)){border-radius:var(--radius-3xl);}.rounded-full:where(:not([data-skin],[data-skin] *)){border-radius:calc(infinity * 1px);}.rounded-lg:where(:not([data-skin],[data-skin] *)){border-radius:var(--radius-lg);}.rounded-xl:where(:not([data-skin],[data-skin] *)){border-radius:var(--radius-xl);}.before\:rounded-full:where(:not([data-skin],[data-skin] *))::before{border-radius:calc(infinity * 1px);}.border-double:where(:not([data-skin],[data-skin] *)){--un-border-style:double;border-style:double;}.aria-\[current\=page\]\:bg-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-accent) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-accent\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) 10%, transparent);}.aria-\[current\=page\]\:bg-on-base[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-base\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) 10%, transparent);}.aria-\[current\=page\]\:bg-on-dark[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-dark\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) 10%, transparent);}.aria-\[current\=page\]\:bg-on-primary[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-primary\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) 10%, transparent);}.aria-\[current\=page\]\:bg-on-secondary[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-secondary\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) 10%, transparent);}.aria-\[current\=page\]\:bg-on-surface[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:bg-on-surface\/10[aria-current=page]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) 10%, transparent);}.bg-accent:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-accent) var(--un-bg-opacity), transparent);}.bg-base:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-bg) var(--un-bg-opacity), transparent);}.bg-dark:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-dark) var(--un-bg-opacity), transparent);}.bg-on-accent:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) var(--un-bg-opacity), transparent);}.bg-on-accent\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) 0.07, transparent);}.bg-on-base:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) var(--un-bg-opacity), transparent);}.bg-on-base\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) 0.07, transparent);}.bg-on-base\/10:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) 10%, transparent);}.bg-on-dark:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) var(--un-bg-opacity), transparent);}.bg-on-dark\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) 0.07, transparent);}.bg-on-primary:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) var(--un-bg-opacity), transparent);}.bg-on-primary\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) 0.07, transparent);}.bg-on-secondary:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) var(--un-bg-opacity), transparent);}.bg-on-secondary\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) 0.07, transparent);}.bg-on-surface:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) var(--un-bg-opacity), transparent);}.bg-on-surface\/\[0\.07\]:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) 0.07, transparent);}.bg-primary:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-primary) var(--un-bg-opacity), transparent);}.bg-secondary:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-secondary) var(--un-bg-opacity), transparent);}.bg-surface:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--c-surface) var(--un-bg-opacity), transparent);}.bg-white:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent);}.hover\:bg-on-accent:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) var(--un-bg-opacity), transparent);}.hover\:bg-on-accent\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) 10%, transparent);}.hover\:bg-on-accent\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-accent) 5%, transparent);}.hover\:bg-on-base:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) var(--un-bg-opacity), transparent);}.hover\:bg-on-base\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) 10%, transparent);}.hover\:bg-on-base\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-base) 5%, transparent);}.hover\:bg-on-dark:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) var(--un-bg-opacity), transparent);}.hover\:bg-on-dark\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) 10%, transparent);}.hover\:bg-on-dark\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-dark) 5%, transparent);}.hover\:bg-on-primary:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) var(--un-bg-opacity), transparent);}.hover\:bg-on-primary\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) 10%, transparent);}.hover\:bg-on-primary\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-primary) 5%, transparent);}.hover\:bg-on-secondary:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) var(--un-bg-opacity), transparent);}.hover\:bg-on-secondary\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) 10%, transparent);}.hover\:bg-on-secondary\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-secondary) 5%, transparent);}.hover\:bg-on-surface:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) var(--un-bg-opacity), transparent);}.hover\:bg-on-surface\/10:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) 10%, transparent);}.hover\:bg-on-surface\/5:hover:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in srgb, var(--on-surface) 5%, transparent);}.before\:bg-accent:where(:not([data-skin],[data-skin] *))::before{background-color:color-mix(in srgb, var(--c-accent) var(--un-bg-opacity), transparent);}.after\:bg-accent:where(:not([data-skin],[data-skin] *))::after{background-color:color-mix(in srgb, var(--c-accent) var(--un-bg-opacity), transparent);}.aria-\[current\=page\]\:opacity-100[aria-current=page]:where(:not([data-skin],[data-skin] *)){opacity:100%;}.opacity-40:where(:not([data-skin],[data-skin] *)){opacity:40%;}.opacity-50:where(:not([data-skin],[data-skin] *)){opacity:50%;}.opacity-55:where(:not([data-skin],[data-skin] *)){opacity:55%;}.opacity-60:where(:not([data-skin],[data-skin] *)){opacity:60%;}.opacity-65:where(:not([data-skin],[data-skin] *)){opacity:65%;}.opacity-70:where(:not([data-skin],[data-skin] *)){opacity:70%;}.opacity-75:where(:not([data-skin],[data-skin] *)){opacity:75%;}.opacity-80:where(:not([data-skin],[data-skin] *)){opacity:80%;}.opacity-85:where(:not([data-skin],[data-skin] *)){opacity:85%;}.hover\:opacity-100:hover:where(:not([data-skin],[data-skin] *)){opacity:100%;}.hover\:opacity-90:hover:where(:not([data-skin],[data-skin] *)){opacity:90%;}.aria-\[current\=page\]\:before\:opacity-100[aria-current=page]:where(:not([data-skin],[data-skin] *))::before{opacity:100%;}.before\:opacity-0:where(:not([data-skin],[data-skin] *))::before{opacity:0%;}.aria-\[current\=page\]\:underline[aria-current=page]:where(:not([data-skin],[data-skin] *)){text-decoration-line:underline;}.underline:where(:not([data-skin],[data-skin] *)){text-decoration-line:underline;}.aria-\[current\=page\]\:decoration-accent[aria-current=page]:where(:not([data-skin],[data-skin] *)){text-decoration-color:color-mix(in srgb, var(--c-accent) var(--un-line-opacity), transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--c-accent) var(--un-line-opacity), transparent);}.aria-\[current\=page\]\:underline-offset-8[aria-current=page]:where(:not([data-skin],[data-skin] *)){text-underline-offset:8px;}.flex:where(:not([data-skin],[data-skin] *)){display:flex;}.peer:checked~.peer-checked\:flex:where(:not([data-skin],[data-skin] *)){display:flex;}.inline-flex:where(:not([data-skin],[data-skin] *)){display:inline-flex;}.flex-1:where(:not([data-skin],[data-skin] *)){flex:1 1 0%;}.shrink-0:where(:not([data-skin],[data-skin] *)){flex-shrink:0;}.basis-full:where(:not([data-skin],[data-skin] *)){flex-basis:100%;}.flex-col:where(:not([data-skin],[data-skin] *)){flex-direction:column;}.flex-wrap:where(:not([data-skin],[data-skin] *)){flex-wrap:wrap;}.gap-\[0\.55em\]:where(:not([data-skin],[data-skin] *)){gap:0.55em;}.gap-1:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 1);}.gap-10:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 10);}.gap-2:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 2);}.gap-2\.5:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 2.5);}.gap-3:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 3);}.gap-4:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 4);}.gap-5:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 5);}.gap-6:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 6);}.gap-7:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 7);}.gap-8:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 8);}.gap-9:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 9);}.gap-x-10:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 10);}.gap-x-12:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 12);}.gap-x-3:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 3);}.gap-x-5:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 5);}.gap-x-6:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 6);}.gap-x-7:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 7);}.gap-x-8:where(:not([data-skin],[data-skin] *)){column-gap:calc(var(--spacing) * 8);}.gap-y-1:where(:not([data-skin],[data-skin] *)){row-gap:calc(var(--spacing) * 1);}.gap-y-1\.5:where(:not([data-skin],[data-skin] *)){row-gap:calc(var(--spacing) * 1.5);}.gap-y-2:where(:not([data-skin],[data-skin] *)){row-gap:calc(var(--spacing) * 2);}.gap-y-2\.5:where(:not([data-skin],[data-skin] *)){row-gap:calc(var(--spacing) * 2.5);}.gap-y-3:where(:not([data-skin],[data-skin] *)){row-gap:calc(var(--spacing) * 3);}.grid:where(:not([data-skin],[data-skin] *)){display:grid;}.peer:checked~.peer-checked\:grid:where(:not([data-skin],[data-skin] *)){display:grid;}.grid-cols-\[1fr_auto_1fr\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:1fr auto 1fr;}.grid-cols-2:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(2,minmax(0,1fr));}.h-\[0\.95em\]:where(:not([data-skin],[data-skin] *)){height:0.95em;}.h-\[1\.5em\]:where(:not([data-skin],[data-skin] *)){height:1.5em;}.h-\[3\.1rem\]:where(:not([data-skin],[data-skin] *)){height:3.1rem;}.h-11:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 11);}.h-14:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 14);}.h-2:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 2);}.h-2\.5:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 2.5);}.h-4:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 4);}.h-5:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 5);}.h-6:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 6);}.h-7:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 7);}.h-9:where(:not([data-skin],[data-skin] *)){height:calc(var(--spacing) * 9);}.h-px:where(:not([data-skin],[data-skin] *)){height:1px;}.max-w-\[90rem\]:where(:not([data-skin],[data-skin] *)){max-width:90rem;}.max-w-3xl:where(:not([data-skin],[data-skin] *)){max-width:var(--container-3xl);}.max-w-5xl:where(:not([data-skin],[data-skin] *)){max-width:var(--container-5xl);}.max-w-6xl:where(:not([data-skin],[data-skin] *)){max-width:var(--container-6xl);}.max-w-7xl:where(:not([data-skin],[data-skin] *)){max-width:var(--container-7xl);}.max-w-md:where(:not([data-skin],[data-skin] *)){max-width:var(--container-md);}.max-w-sm:where(:not([data-skin],[data-skin] *)){max-width:var(--container-sm);}.max-w-xl:where(:not([data-skin],[data-skin] *)){max-width:var(--container-xl);}.max-w-xs:where(:not([data-skin],[data-skin] *)){max-width:var(--container-xs);}.min-h-\[4\.2rem\]:where(:not([data-skin],[data-skin] *)){min-height:4.2rem;}.min-w-0:where(:not([data-skin],[data-skin] *)){min-width:calc(var(--spacing) * 0);}.w-\[0\.95em\]:where(:not([data-skin],[data-skin] *)){width:0.95em;}.w-\[3\.1rem\]:where(:not([data-skin],[data-skin] *)){width:3.1rem;}.w-\[4\.5rem\]:where(:not([data-skin],[data-skin] *)){width:4.5rem;}.w-10:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 10);}.w-11:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 11);}.w-12:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 12);}.w-14:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 14);}.w-16:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 16);}.w-2:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 2);}.w-2\.5:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 2.5);}.w-4:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 4);}.w-5:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 5);}.w-6:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 6);}.w-7:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 7);}.w-9:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 9);}.w-auto:where(:not([data-skin],[data-skin] *)){width:auto;}.w-fit:where(:not([data-skin],[data-skin] *)){width:fit-content;}.w-full:where(:not([data-skin],[data-skin] *)){width:100%;}.before\:h-1\.5:where(:not([data-skin],[data-skin] *))::before{height:calc(var(--spacing) * 1.5);}.before\:w-1\.5:where(:not([data-skin],[data-skin] *))::before{width:calc(var(--spacing) * 1.5);}.after\:h-0\.5:where(:not([data-skin],[data-skin] *))::after{height:calc(var(--spacing) * 0.5);}.aspect-\[3\/2\]:where(:not([data-skin],[data-skin] *)){aspect-ratio:3/2;}.aspect-\[4\/3\]:where(:not([data-skin],[data-skin] *)){aspect-ratio:4/3;}.block:where(:not([data-skin],[data-skin] *)){display:block;}.peer:checked~.peer-checked\:block:where(:not([data-skin],[data-skin] *)){display:block;}.inline-block:where(:not([data-skin],[data-skin] *)){display:inline-block;}.hidden:where(:not([data-skin],[data-skin] *)){display:none;}.cursor-pointer:where(:not([data-skin],[data-skin] *)){cursor:pointer;}.whitespace-nowrap:where(:not([data-skin],[data-skin] *)){white-space:nowrap;}.whitespace-pre-line:where(:not([data-skin],[data-skin] *)){white-space:pre-line;}.break-words:where(:not([data-skin],[data-skin] *)){overflow-wrap:break-word;}.truncate:where(:not([data-skin],[data-skin] *)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.uppercase:where(:not([data-skin],[data-skin] *)){text-transform:uppercase;}.antialiased:where(:not([data-skin],[data-skin] *)){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.focus\:ring-4:focus:where(:not([data-skin],[data-skin] *)){--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(4px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.focus\:ring-primary\/15:focus:where(:not([data-skin],[data-skin] *)){--un-ring-color:color-mix(in srgb, var(--c-primary) 15%, transparent);}.shadow-2xl:where(:not([data-skin],[data-skin] *)){--un-shadow:0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-dark\/10:where(:not([data-skin],[data-skin] *)){--un-shadow-color:color-mix(in srgb, var(--c-dark) 10%, transparent);}.shadow-dark\/20:where(:not([data-skin],[data-skin] *)){--un-shadow-color:color-mix(in srgb, var(--c-dark) 20%, transparent);}.shadow-dark\/30:where(:not([data-skin],[data-skin] *)){--un-shadow-color:color-mix(in srgb, var(--c-dark) 30%, transparent);}.shadow-dark\/40:where(:not([data-skin],[data-skin] *)){--un-shadow-color:color-mix(in srgb, var(--c-dark) 40%, transparent);}.shadow-lg:where(:not([data-skin],[data-skin] *)){--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-sm:where(:not([data-skin],[data-skin] *)){--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-xl:where(:not([data-skin],[data-skin] *)){--un-shadow:0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.after\:origin-left:where(:not([data-skin],[data-skin] *))::after{transform-origin:left;}[dir="rtl"] .rtl\:after\:origin-right:where(:not([data-skin],[data-skin] *))::after{transform-origin:right;}.group:hover .group-hover\:translate-x-1\.5:where(:not([data-skin],[data-skin] *)){--un-translate-x:calc(var(--spacing) * 1.5);translate:var(--un-translate-x) var(--un-translate-y);}.hover\:-translate-y-0\.5:hover:where(:not([data-skin],[data-skin] *)){--un-translate-y:calc(var(--spacing) * -0.5);translate:var(--un-translate-x) var(--un-translate-y);}[dir="rtl"] .group:hover .rtl\:group-hover\:-translate-x-1\.5:where(:not([data-skin],[data-skin] *)){--un-translate-x:calc(var(--spacing) * -1.5);translate:var(--un-translate-x) var(--un-translate-y);}.hover\:after\:scale-x-100:hover:where(:not([data-skin],[data-skin] *))::after{--un-scale-x:100%;scale:var(--un-scale-x) var(--un-scale-y);}.after\:scale-x-0:where(:not([data-skin],[data-skin] *))::after{--un-scale-x:0%;scale:var(--un-scale-x) var(--un-scale-y);}.aria-\[current\=page\]\:after\:scale-x-100[aria-current=page]:where(:not([data-skin],[data-skin] *))::after{--un-scale-x:100%;scale:var(--un-scale-x) var(--un-scale-y);}.transition-colors:where(:not([data-skin],[data-skin] *)){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.transition-opacity:where(:not([data-skin],[data-skin] *)){transition-property:opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.transition-transform:where(:not([data-skin],[data-skin] *)){transition-property:transform,translate,scale,rotate;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.after\:transition-transform:where(:not([data-skin],[data-skin] *))::after{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.items-end:where(:not([data-skin],[data-skin] *)){align-items:flex-end;}.items-center:where(:not([data-skin],[data-skin] *)){align-items:center;}.items-baseline:where(:not([data-skin],[data-skin] *)){align-items:baseline;}.items-stretch:where(:not([data-skin],[data-skin] *)){align-items:stretch;}.self-start:where(:not([data-skin],[data-skin] *)){align-self:flex-start;}.self-center:where(:not([data-skin],[data-skin] *)){align-self:center;}.end-0:where(:not([data-skin],[data-skin] *)){inset-inline-end:calc(var(--spacing) * 0);}.end-4:where(:not([data-skin],[data-skin] *)){inset-inline-end:calc(var(--spacing) * 4);}.start-0:where(:not([data-skin],[data-skin] *)){inset-inline-start:calc(var(--spacing) * 0);}.start-4:where(:not([data-skin],[data-skin] *)){inset-inline-start:calc(var(--spacing) * 4);}.inset-x-0:where(:not([data-skin],[data-skin] *)){inset-inline:calc(var(--spacing) * 0);}.inset-x-3:where(:not([data-skin],[data-skin] *)){inset-inline:calc(var(--spacing) * 3);}.after\:inset-x-0:where(:not([data-skin],[data-skin] *))::after{inset-inline:calc(var(--spacing) * 0);}.bottom-0:where(:not([data-skin],[data-skin] *)){bottom:calc(var(--spacing) * 0);}.bottom-3:where(:not([data-skin],[data-skin] *)){bottom:calc(var(--spacing) * 3);}.bottom-4:where(:not([data-skin],[data-skin] *)){bottom:calc(var(--spacing) * 4);}.top-0:where(:not([data-skin],[data-skin] *)){top:calc(var(--spacing) * 0);}.top-full:where(:not([data-skin],[data-skin] *)){top:100%;}.after\:-bottom-0\.5:where(:not([data-skin],[data-skin] *))::after{bottom:calc(var(--spacing) * -0.5);}.justify-end:where(:not([data-skin],[data-skin] *)){justify-content:flex-end;}.justify-center:where(:not([data-skin],[data-skin] *)){justify-content:center;}.justify-between:where(:not([data-skin],[data-skin] *)){justify-content:space-between;}.justify-self-start:where(:not([data-skin],[data-skin] *)){justify-self:start;}.justify-self-end:where(:not([data-skin],[data-skin] *)){justify-self:end;}.justify-self-center:where(:not([data-skin],[data-skin] *)){justify-self:center;}.order-1:where(:not([data-skin],[data-skin] *)){order:1;}.order-2:where(:not([data-skin],[data-skin] *)){order:2;}.order-first:where(:not([data-skin],[data-skin] *)){order:calc(-infinity);}.order-last:where(:not([data-skin],[data-skin] *)){order:calc(infinity);}.absolute:where(:not([data-skin],[data-skin] *)){position:absolute;}.fixed:where(:not([data-skin],[data-skin] *)){position:fixed;}.relative:where(:not([data-skin],[data-skin] *)){position:relative;}.sticky:where(:not([data-skin],[data-skin] *)){position:sticky;}.after\:absolute:where(:not([data-skin],[data-skin] *))::after{position:absolute;}.z-30:where(:not([data-skin],[data-skin] *)){z-index:30;}.z-40:where(:not([data-skin],[data-skin] *)){z-index:40;}.overflow-hidden:where(:not([data-skin],[data-skin] *)){overflow:hidden;}.from-dark\/70:where(:not([data-skin],[data-skin] *)){--un-from-opacity:70%;--un-gradient-from:color-mix(in oklab, var(--colors-dark) var(--un-from-opacity), transparent);--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));}.to-transparent:where(:not([data-skin],[data-skin] *)){--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));}.bg-gradient-to-b:where(:not([data-skin],[data-skin] *)){--un-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--un-gradient-stops));}.object-cover:where(:not([data-skin],[data-skin] *)){object-fit:cover;}.object-contain:where(:not([data-skin],[data-skin] *)){object-fit:contain;}.tabular-nums:where(:not([data-skin],[data-skin] *)){--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);}.text-base:where(:not([data-skin],[data-skin] *)){font-size:1rem;}.divide-ink\/10:where(:not([data-skin],[data-skin] *)){:where(&>:not(:last-child)){border-color:color-mix(in srgb, var(--c-text) 10%, transparent);}}.divide-y:where(:not([data-skin],[data-skin] *)){:where(&>:not(:last-child)){--un-divide-y-reverse:0;border-top-width:calc(1px * var(--un-divide-y-reverse));border-top-style:var(--un-border-style);border-bottom-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-style:var(--un-border-style);}}@media (max-width: 1439px){.max-\[1439px\]\:tracking-\[0\.1em\]:where(:not([data-skin],[data-skin] *)){--un-tracking:0.1em;letter-spacing:0.1em;}.max-\[1439px\]\:px-3:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 3);}.max-\[1439px\]\:px-4:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 4);}}@supports (color: color-mix(in lab, red, red)){.text-white:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);}.text-white\/80:where(:not([data-skin],[data-skin] *)){color:color-mix(in oklab, var(--colors-white) 80%, transparent);}.bg-white:where(:not([data-skin],[data-skin] *)){background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent);}}@media (min-width: 40rem){.sm\:grid-cols-2:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(2,minmax(0,1fr));}.sm\:block:where(:not([data-skin],[data-skin] *)){display:block;}}@media (min-width: 48rem){.md\:text-2xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));}.md\:text-4xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-4xl-fontSize);line-height:var(--un-leading, var(--text-4xl-lineHeight));}.md\:text-\[1\.45rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.45rem;}.md\:text-\[1\.5rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.5rem;}.md\:text-\[1\.6rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.6rem;}.md\:text-\[1\.7rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.7rem;}.md\:text-\[2\.6rem\]:where(:not([data-skin],[data-skin] *)){font-size:2.6rem;}.md\:p-0:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 0);}.md\:p-10:where(:not([data-skin],[data-skin] *)){padding:calc(var(--spacing) * 10);}.md\:px-10:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 10);}.md\:px-12:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 12);}.md\:px-6:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 6);}.md\:px-8:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 8);}.md\:py-0:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 0);}.md\:py-10:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 10);}.md\:py-12:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 12);}.md\:py-14:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 14);}.md\:py-16:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 16);}.md\:py-20:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 20);}.md\:py-24:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 24);}.md\:py-4:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 4);}.md\:py-6:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 6);}.md\:pb-0:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 0);}.md\:pt-14:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 14);}.md\:pt-16:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 16);}.md\:text-end:where(:not([data-skin],[data-skin] *)){text-align:end;}.md\:border-e:where(:not([data-skin],[data-skin] *)){border-inline-end-width:1px;}.md\:border-0:where(:not([data-skin],[data-skin] *)){border-width:0px;}.md\:bg-transparent:where(:not([data-skin],[data-skin] *)){background-color:transparent;}.md\:flex:where(:not([data-skin],[data-skin] *)){display:flex;}.md\:flex-row:where(:not([data-skin],[data-skin] *)){flex-direction:row;}.md\:flex-col:where(:not([data-skin],[data-skin] *)){flex-direction:column;}.md\:gap-7:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 7);}.md\:col-span-3:where(:not([data-skin],[data-skin] *)){grid-column:span 3/span 3;}.md\:col-span-4:where(:not([data-skin],[data-skin] *)){grid-column:span 4/span 4;}.md\:col-span-5:where(:not([data-skin],[data-skin] *)){grid-column:span 5/span 5;}.md\:grid-cols-\[1fr_auto\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:1fr auto;}.md\:grid-cols-\[2fr_2fr_auto\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:2fr 2fr auto;}.md\:grid-cols-\[2fr_3fr_auto\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:2fr 3fr auto;}.md\:grid-cols-\[2fr_3fr\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:2fr 3fr;}.md\:grid-cols-\[5fr_2fr_2fr_3fr\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:5fr 2fr 2fr 3fr;}.md\:grid-cols-12:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(12,minmax(0,1fr));}.md\:grid-cols-2:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(2,minmax(0,1fr));}.md\:grid-cols-3:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(3,minmax(0,1fr));}.md\:grid-cols-4:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(4,minmax(0,1fr));}.md\:w-64:where(:not([data-skin],[data-skin] *)){width:calc(var(--spacing) * 64);}.md\:hidden:where(:not([data-skin],[data-skin] *)){display:none;}.md\:shadow-none:where(:not([data-skin],[data-skin] *)){--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.md\:items-start:where(:not([data-skin],[data-skin] *)){align-items:flex-start;}.md\:items-end:where(:not([data-skin],[data-skin] *)){align-items:flex-end;}.md\:items-center:where(:not([data-skin],[data-skin] *)){align-items:center;}.md\:justify-between:where(:not([data-skin],[data-skin] *)){justify-content:space-between;}.md\:static:where(:not([data-skin],[data-skin] *)){position:static;}}@media (min-width: 64rem){.lg\:text-\[1\.45rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.45rem;}.lg\:px-6:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 6);}.lg\:grid-cols-3:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(3,minmax(0,1fr));}}@media (min-width: 80rem){.xl\:text-2xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));}.xl\:text-xl:where(:not([data-skin],[data-skin] *)){font-size:var(--text-xl-fontSize);line-height:var(--un-leading, var(--text-xl-lineHeight));}.xl\:text-\[1\.5rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.5rem;}.xl\:text-\[1\.6rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.6rem;}.xl\:text-\[1\.7rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.7rem;}.xl\:text-\[1\.9rem\]:where(:not([data-skin],[data-skin] *)){font-size:1.9rem;}.xl\:text-\[2\.1rem\]:where(:not([data-skin],[data-skin] *)){font-size:2.1rem;}.xl\:text-\[2rem\]:where(:not([data-skin],[data-skin] *)){font-size:2rem;}.xl\:my-4:where(:not([data-skin],[data-skin] *)){margin-block:calc(var(--spacing) * 4);}.xl\:px-10:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 10);}.xl\:px-6:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 6);}.xl\:px-8:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 8);}.xl\:px-9:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 9);}.xl\:py-0:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 0);}.xl\:py-4:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 4);}.xl\:py-5:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 5);}.xl\:py-6:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 6);}.xl\:py-7:where(:not([data-skin],[data-skin] *)){padding-block:calc(var(--spacing) * 7);}.xl\:pb-10:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 10);}.xl\:pb-12:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 12);}.xl\:pb-5:where(:not([data-skin],[data-skin] *)){padding-bottom:calc(var(--spacing) * 5);}.xl\:ps-5:where(:not([data-skin],[data-skin] *)){padding-inline-start:calc(var(--spacing) * 5);}.xl\:pt-4:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 4);}.xl\:pt-5:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 5);}.xl\:pt-6:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 6);}.xl\:pt-7:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 7);}.xl\:pt-8:where(:not([data-skin],[data-skin] *)){padding-top:calc(var(--spacing) * 8);}.xl\:border-e:where(:not([data-skin],[data-skin] *)){border-inline-end-width:1px;}.xl\:border-s-4:where(:not([data-skin],[data-skin] *)){border-inline-start-width:4px;}.xl\:flex:where(:not([data-skin],[data-skin] *)){display:flex;}.xl\:inline-flex:where(:not([data-skin],[data-skin] *)){display:inline-flex;}.xl\:gap-10:where(:not([data-skin],[data-skin] *)){gap:calc(var(--spacing) * 10);}.xl\:grid:where(:not([data-skin],[data-skin] *)){display:grid;}.xl\:grid-cols-\[1fr_auto_1fr\]:where(:not([data-skin],[data-skin] *)){grid-template-columns:1fr auto 1fr;}.xl\:grid-cols-2:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(2,minmax(0,1fr));}.xl\:grid-cols-3:where(:not([data-skin],[data-skin] *)){grid-template-columns:repeat(3,minmax(0,1fr));}.xl\:block:where(:not([data-skin],[data-skin] *)){display:block;}.xl\:hidden:where(:not([data-skin],[data-skin] *)){display:none;}.xl\:items-end:where(:not([data-skin],[data-skin] *)){align-items:flex-end;}.xl\:items-stretch:where(:not([data-skin],[data-skin] *)){align-items:stretch;}.xl\:justify-center:where(:not([data-skin],[data-skin] *)){justify-content:center;}.xl\:order-1:where(:not([data-skin],[data-skin] *)){order:1;}.xl\:order-2:where(:not([data-skin],[data-skin] *)){order:2;}.xl\:order-3:where(:not([data-skin],[data-skin] *)){order:3;}}@media (min-width: 80rem){@media (max-width: 1439px){.max-\[1439px\]\:xl\:px-5:where(:not([data-skin],[data-skin] *)){padding-inline:calc(var(--spacing) * 5);}}} /* overflow:hidden makes an element a scroll container → scroll-driven reveal (animation-timeline:view()) freezes half-way for items inside it; overflow:clip clips the same way without being a scroll container. Platform rule for all sites. */ html:not(_) .overflow-hidden{overflow:clip}html:not(_) .overflow-x-hidden{overflow-x:clip}html:not(_) .overflow-y-hidden{overflow-y:clip} @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ :not(_).reveal,:not(_).reveal-left,:not(_).reveal-right,:not(_).reveal-scale,:not(_).reveal-stagger>*{animation-duration:1ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-timeline:view();animation-range:entry 5% cover 28%} :not(_).reveal{animation-name:rv-up}:not(_).reveal-left{animation-name:rv-left}:not(_).reveal-right{animation-name:rv-right}:not(_).reveal-scale{animation-name:rv-scale}:not(_).reveal-stagger>*{animation-name:rv-up} :not(_).reveal-stagger>*:nth-child(2){animation-range:entry 10% cover 32%}:not(_).reveal-stagger>*:nth-child(3){animation-range:entry 15% cover 36%}:not(_).reveal-stagger>*:nth-child(4){animation-range:entry 20% cover 40%} :not(_).parallax-slow{animation:rv-par linear both;animation-timeline:view();animation-range:cover} } :not(_).intro{animation:rv-up .9s cubic-bezier(.2,.7,.2,1) both}:not(_).intro-2{animation:rv-up .9s .15s cubic-bezier(.2,.7,.2,1) both}:not(_).intro-3{animation:rv-up .9s .3s cubic-bezier(.2,.7,.2,1) both} :not(_).hover-lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}:not(_).hover-lift:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.14)} :not(_).hover-zoom{overflow:hidden}:not(_).hover-zoom img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}:not(_).hover-zoom:hover img{transform:scale(1.06)} :not(_).marquee{display:flex;gap:3rem;width:max-content;animation:rv-marquee 40s linear infinite} } @keyframes rv-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes rv-left{from{opacity:0;transform:translateX(calc(-48px * var(--dirx, 1)))}to{opacity:1;transform:none}} @keyframes rv-right{from{opacity:0;transform:translateX(calc(48px * var(--dirx, 1)))}to{opacity:1;transform:none}}@keyframes rv-scale{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}} @keyframes rv-par{from{transform:translateY(-8%)}to{transform:translateY(8%)}}@keyframes rv-marquee{to{transform:translateX(calc(-50% * var(--dirx, 1)))}} :not(_).carousel{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}:not(_).carousel::-webkit-scrollbar{display:none}:not(_).carousel>*{scroll-snap-align:start;flex:0 0 auto} /* ---------- medium (and expressive) ---------- */ /* a scene never widens the page (2026-10-15, release check: the one-card scene «swap» on a phone put its side photos 13–145 px past the right edge — the page scrolled sideways on mox and mov): the pinned scenes and the block of a huge drifting word clip what goes past their sides. clip, not hidden: it makes no scroll container, so the pinned stage stays sticky. Zero weight: a skin may set its own overflow. */ :not(_):where(.x-turn, .x-deck, .x-rise, .x-steps, .x-hrow, :has(> .m-bigword)) { overflow-x: clip; } /* text by lines: the platform script wraps every line in .ml-line > span (lines counted from the real width) */ :not(_).ml-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } :not(_).ml-line > span { display: inline-block; } /* words as blocks: every word in .mw-word */ :not(_).mw-word { display: inline-block; } @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion] .m-lines .ml-line > span { transform: translateY(var(--lines-shift, 110%)); transition: transform var(--lines-dur, .9s) var(--ease, cubic-bezier(.2,.7,.2,1)); transition-delay: calc(var(--i, 0) * var(--lines-step, .1s)); } :not(_)[data-motion] .m-lines.m-in .ml-line > span { transform: none; } :not(_)[data-motion] .m-words .mw-word { opacity: 0; transform: translateY(var(--words-shift, .4em)) scale(var(--words-scale, .96)); transition: opacity var(--words-dur, .5s), transform var(--words-dur, .6s) var(--ease, cubic-bezier(.2,.7,.2,1)); transition-delay: calc(var(--i, 0) * var(--words-step, .07s)); } :not(_)[data-motion] .m-words.m-in .mw-word { opacity: 1; transform: none; } } /* huge background word: sits across the section, drifts sideways with the scroll */ :not(_).m-bigword { white-space: nowrap; pointer-events: none; user-select: none; line-height: .85; overflow: clip; } :not(_)[data-motion] body { overflow-x: clip; } :not(_)[data-motion] .m-bigword { overflow: visible; } :not(_).m-bigword.m-outline { color: transparent; -webkit-text-stroke: var(--big-stroke, 1.5px) currentColor; } /* scroll-driven animation freezes inside an overflow:hidden ancestor (it becomes the scroll container); clip cuts the same way without it */ :not(_).m-unveil { overflow: clip; } /* counter: the number in the text counts up when it comes into view (the platform script) */ :not(_).m-count { font-variant-numeric: tabular-nums; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion] .m-bigword { animation: mBig linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* photo unveiled on entry: grows from a smaller frame to full */ :not(_)[data-motion] .m-unveil { animation: mUnveil linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } :not(_)[data-motion] .m-unveil img, :not(_)[data-motion] .m-unveil video { animation: mUnveilImg linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } } } @keyframes mBig { from { transform: translateX(calc(var(--big-from, 8%) * var(--dirx, 1))); } to { transform: translateX(calc(var(--big-to, -28%) * var(--dirx, 1))); } } @keyframes mUnveil { from { clip-path: inset(var(--unveil-y, 14%) var(--unveil-x, 18%) round var(--unveil-radius, 18px)); } to { clip-path: inset(0 0 0 0 round 0); } } @keyframes mUnveilImg { from { transform: scale(var(--unveil-zoom, 1.25)); } to { transform: scale(1); } } /* ---------- expressive ---------- */ /* pinned steps:
with children .x-step (each: .x-step-text and .x-step-media); the section is n screens tall, the stage sticks, the active step (by scroll progress) shows; optional counter .x-steps-count */ :not(_).x-steps { position: relative; } :not(_).x-steps .x-stage { position: relative; } :not(_)[data-motion="expressive"] .x-steps { height: calc(100vh - var(--hdr, 0px) + (var(--n, 3) - 1) * var(--step, 50vh)); } /* half a screen of scroll per step (owner: a whole screen per step took too long) */ :not(_)[data-motion="expressive"] .x-steps .x-stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); overflow: clip; } :not(_)[data-motion="expressive"] .x-steps .x-step { position: absolute; inset: 0; } :not(_)[data-motion="expressive"] .x-steps .x-step-media { transition: opacity var(--steps-fade, .7s), transform var(--steps-move, .9s) var(--ease, cubic-bezier(.2,.7,.2,1)); opacity: 0; transform: translateY(var(--steps-media-shift, 6%)) scale(var(--steps-media-scale, .96)); } :not(_)[data-motion="expressive"] .x-steps .x-step-text { transition: opacity var(--steps-text-fade, .5s), transform var(--steps-text-move, .7s) var(--ease, cubic-bezier(.2,.7,.2,1)); opacity: 0; transform: translateY(var(--steps-text-shift, 24px)); } :not(_)[data-motion="expressive"] .x-steps .x-step.x-on .x-step-media, :not(_)[data-motion="expressive"] .x-steps .x-step.x-on .x-step-text { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :not(_)[data-motion="expressive"] .x-steps { height: auto; } :not(_)[data-motion="expressive"] .x-steps .x-stage { position: relative; height: auto; } :not(_)[data-motion="expressive"] .x-steps .x-step { position: relative; } :not(_)[data-motion="expressive"] .x-steps .x-step-media, :not(_)[data-motion="expressive"] .x-steps .x-step-text { opacity: 1; transform: none; } } /* horizontal row moved by the vertical scroll:
cards
*/ :not(_):where(.x-hrow .x-hrow-track) { display: flex; gap: 2rem; overflow-x: auto; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] .x-hrow { height: calc(100vh - var(--hdr, 0px) + var(--dist, 100vw)); view-timeline-name: --xh; } :not(_)[data-motion="expressive"] .x-hrow .x-hrow-stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); overflow: clip; display: flex; align-items: center; } :not(_)[data-motion="expressive"] .x-hrow .x-hrow-track { overflow: visible; animation: xH linear both; animation-timeline: --xh; animation-range: contain 0% contain 100%; } /* floating collage: children at different speeds */ :not(_)[data-motion="expressive"] .x-collage > * { animation: xFloat linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } :not(_)[data-motion="expressive"] .x-collage > :nth-child(3n+1) { --d: var(--collage-a, 22vh); } :not(_)[data-motion="expressive"] .x-collage > :nth-child(3n+2) { --d: var(--collage-b, -14vh); } :not(_)[data-motion="expressive"] .x-collage > :nth-child(3n) { --d: var(--collage-c, 36vh); } } } @keyframes xH { to { transform: translateX(calc(-1 * var(--dist, 100vw) * var(--dirx, 1))); } } @keyframes xFloat { from { transform: translateY(var(--d, 20%)); } to { transform: translateY(calc(-1 * var(--d, 20%))); } } /* footer revealed from under the page: found by its place (body > footer), not by a class — a class on a part of the platform would need its CSS in the platform's common CSS (rule 5); a footer taller than the screen gets data-no-reveal from the script and stays in place */ @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] body > footer:not([data-no-reveal]) { position: sticky; bottom: 0; z-index: 0; } :not(_)[data-motion="expressive"] body > main { position: relative; z-index: 1; background: var(--c-bg); } } /* ---------- popular elements (any level; they work without motion) ---------- */ :not(_):where(.p-tabs [role=tablist]) { display: flex; gap: .5rem; flex-wrap: wrap; } :not(_).p-tabs [role=tab] { cursor: pointer; } :not(_).p-tabs [role=tabpanel][hidden] { display: none; } :not(_).p-tabs:not(.p-ready) .p-panel ~ .p-panel { display: none; } /* before the script: only the first panel */ /* tabs with motion: a pill behind the tabs moves to the chosen one (its colour taken from the selected tab of the skin); the new panel slides in */ :not(_).p-tabs.p-ind [role=tablist] { position: relative; } :not(_).p-tabs.p-ind [role=tab] { position: relative; z-index: 1; background: transparent !important; transition: color var(--tabs-dur, .3s); } :not(_).p-tabs .p-tabs-ind { position: absolute; z-index: 0; top: 0; left: 0; border-radius: var(--tabs-pill-radius, 99px); transition: transform var(--tabs-dur, .38s) var(--ease, cubic-bezier(.2,.7,.2,1)), width var(--tabs-dur, .38s) var(--ease, cubic-bezier(.2,.7,.2,1)); pointer-events: none; } :not(_).p-tabs [role=tabpanel].p-tab-in { animation: pTabIn var(--tabs-dur, .32s) var(--ease, cubic-bezier(.2,.7,.2,1)) both; } @keyframes pTabIn { from { opacity: 0; transform: translateY(var(--tabs-shift, 10px)); } to { opacity: 1; transform: none; } } :not(_).p-compare { position: relative; overflow: hidden; touch-action: pan-y; } :not(_).p-compare > img { display: block; width: 100%; } :not(_).p-compare > img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos, 50%)); } :not(_).p-compare .p-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: var(--compare-line, 3px); background: var(--compare-color, #fff); transform: translateX(-50%); box-shadow: var(--compare-shadow, 0 0 0 1px rgba(0,0,0,.2)); } :not(_).p-compare .p-compare-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--compare-knob, 44px); height: var(--compare-knob, 44px); border-radius: 50%; background: var(--compare-color, #fff); transform: translate(-50%, -50%); box-shadow: var(--compare-knob-shadow, 0 6px 18px rgba(0,0,0,.3)); } :not(_).p-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--lightbox-pad, 4vh 4vw); } :not(_).p-lightbox img { max-width: 100%; max-height: var(--lightbox-h, 92vh); object-fit: contain; } :not(_).p-lightbox button { position: absolute; top: var(--lightbox-close-at, 16px); inset-inline-end: var(--lightbox-close-at, 16px); font-size: var(--lightbox-close, 28px); background: none; border: 0; color: var(--lightbox-fg, #fff); cursor: pointer; } /* lightbox: no text selection on a click; with motion the photo grows from its own thumbnail crop and goes back the same way (the platform script) */ :not(_)[data-lightbox], :not(_).p-lightbox { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* images are not dragged: a native drag started by a hand moving a few pixels while pressing ate the click ("opens on the second try") */ :not(_)[data-lightbox] img, :not(_).p-lightbox img, :not(_).p-compare img { -webkit-user-drag: none; user-drag: none; } :not(_).p-lightbox { background: transparent; } :not(_).p-lightbox .p-lb-bg { position: absolute; inset: 0; background: var(--lightbox-bg, rgba(0,0,0,.92)); } :not(_).p-lightbox img { position: relative; will-change: transform, opacity; } :not(_).p-lightbox button { z-index: 1; } :not(_).p-video { position: relative; overflow: hidden; } :not(_).p-video video { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------- sliders seen on Foudre (2026-10-14), expressive level; without it the cards simply stand in a grid ---------- */ /* deck:
…
…
— the page stands, the scroll moves the cards instead: every next card rises from below the screen onto the stack, tied to the scroll (owner 2026-10-14); the cards under it sink a little. The platform script sets the transform of every card and the counter .x-deck-count */ :not(_):where(.x-deck .x-deck-stage) { display: flex; flex-wrap: wrap; gap: 1.5rem; } :not(_):where(.x-deck .x-card) { flex: 1 1 220px; } /* a row of cards; a grid with a full-width heading kept an empty column */ :not(_)[data-motion="expressive"] .x-deck { height: calc(100vh - var(--hdr, 0px) + (var(--n, 3) - 1) * var(--deck-step, 80vh)); } :not(_)[data-motion="expressive"] .x-deck .x-deck-stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); display: block; overflow: clip; } :not(_)[data-motion="expressive"] .x-deck .x-card { position: absolute; inset-inline-start: 50%; top: var(--deck-y, 50%); width: var(--deck-w, min(420px, 80vw)); will-change: transform; transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { :not(_)[data-motion="expressive"] .x-deck { height: auto; } :not(_)[data-motion="expressive"] .x-deck .x-deck-stage { position: relative; height: auto; display: flex; } :not(_)[data-motion="expressive"] .x-deck .x-card { position: relative; inset-inline-start: auto; top: auto; transform: none !important; width: auto; } } /* a deck with a heading (owner 2026-10-15 on mox: the cards stood in the middle, against the heading): the cards stand right of it on a computer and under it on a phone; a skin may move them with [--deck-x:…] / [--deck-y:…] on the section */ @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] .x-deck:has(.x-deck-head) .x-card { inset-inline-start: var(--deck-x, 66%); } :not(_)[data-motion="expressive"] .x-deck:has(.x-deck-head) .x-deck-head { max-width: calc(var(--deck-x, 66%) - var(--deck-w, min(420px, 80vw)) / 2 - var(--deck-gap, 3rem)); } @media (max-width: 760px) { :not(_)[data-motion="expressive"] .x-deck:has(.x-deck-head) .x-card { inset-inline-start: 50%; top: var(--deck-y, 64%); } :not(_)[data-motion="expressive"] .x-deck:has(.x-deck-head) .x-deck-head { max-width: none; } } } /* deck, variant "leaving upwards" (x-deck-out, the first version): the top card leaves upwards step by step, the next comes up from the stack */ :not(_)[data-motion="expressive"] .x-deck.x-deck-out { height: calc(100vh - var(--hdr, 0px) + (var(--n, 3) - 1) * var(--step, 50vh)); } :not(_)[data-motion="expressive"] .x-deck.x-deck-out .x-card { transform: translate(-50%, calc(-50% + var(--k, 0) * var(--deck-sink, 14px))) scale(calc(1 - var(--k, 0) * var(--deck-shrink, .05))); z-index: calc(20 - var(--k, 0)); transition: transform var(--deck-dur, .6s) var(--ease, cubic-bezier(.2,.7,.2,1)), opacity var(--deck-fade, .45s); } :not(_)[data-motion="expressive"] .x-deck.x-deck-out .x-card.x-gone { transform: translate(-50%, var(--deck-out-to, -160%)) rotate(var(--deck-out-tilt, -8deg)); opacity: 0; } :not(_)[data-motion="expressive"] .x-deck.x-deck-out .x-card.x-deep { opacity: 0; } /* row rising by the wheel (as on Foudre):
cards
— the page stands, the cards rise from below one after another, tied to the scroll, and stay in a row with their tilts; the platform script moves them */ :not(_):where(.x-rise .x-rise-row) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } :not(_)[data-motion="expressive"] .x-rise { height: calc(100vh - var(--hdr, 0px) + var(--n, 4) * var(--rise-step, 55vh)); } :not(_)[data-motion="expressive"] .x-rise .x-rise-stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); overflow: clip; display: flex; flex-direction: column; justify-content: center; } :not(_)[data-motion="expressive"] .x-rise .x-rise-row > * { will-change: transform; } @media (prefers-reduced-motion: reduce) { :not(_)[data-motion="expressive"] .x-rise { height: auto; } :not(_)[data-motion="expressive"] .x-rise .x-rise-stage { position: relative; height: auto; } :not(_)[data-motion="expressive"] .x-rise .x-rise-row > * { transform: none !important; } } /* 3D turn:
panels
— every panel turns from the side to face the viewer, one after another, while the row comes into view */ :not(_):where(.x-flip) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; perspective: var(--flip-depth, 1400px); } /* fan:
cards
— the cards drop in from above, one after another, and lie with different tilts */ :not(_):where(.x-fan) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] .x-flip > * { transform-origin: 0% 50%; animation: xFlip linear both; animation-timeline: view(); } :not(_)[data-motion="expressive"] .x-flip > :nth-child(1) { animation-range: entry 10% cover 40%; } :not(_)[data-motion="expressive"] .x-flip > :nth-child(2) { animation-range: entry 25% cover 48%; } :not(_)[data-motion="expressive"] .x-flip > :nth-child(3) { animation-range: entry 40% cover 56%; } :not(_)[data-motion="expressive"] .x-flip > :nth-child(n+4) { animation-range: entry 55% cover 64%; } :not(_)[data-motion="expressive"] .x-fan > * { animation: xFan linear both; animation-timeline: view(); } :not(_)[data-motion="expressive"] .x-fan > :nth-child(4n+1) { --r: calc(var(--fan-tilt, 1) * -6deg); animation-range: entry 0% cover 35%; } :not(_)[data-motion="expressive"] .x-fan > :nth-child(4n+2) { --r: calc(var(--fan-tilt, 1) * 4deg); animation-range: entry 10% cover 42%; } :not(_)[data-motion="expressive"] .x-fan > :nth-child(4n+3) { --r: calc(var(--fan-tilt, 1) * -3deg); animation-range: entry 20% cover 49%; } :not(_)[data-motion="expressive"] .x-fan > :nth-child(4n) { --r: calc(var(--fan-tilt, 1) * 7deg); animation-range: entry 30% cover 56%; } } } @keyframes xFlip { from { transform: rotateY(calc(var(--flip-from, -75deg) * var(--dirx, 1))) translateX(calc(var(--flip-shift, -12%) * var(--dirx, 1))); opacity: var(--flip-fade, .2); } to { transform: none; opacity: 1; } } @keyframes xFan { from { transform: translateY(var(--fan-from, -70vh)) rotate(calc(var(--r, 0deg) * var(--fan-swing, -3))); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(var(--r, 0deg)); opacity: 1; } } /* one card position (as on Foudre, owner 2026-10-14):
…
…
…
…
— the whole scene stands on the screen (it neither starts at the top edge nor runs to the bottom one); the scroll turns over the photo in the card in the middle and changes the text on both sides and the background with it: the old text goes up, the new one rises from below, tied to the scroll. The platform script moves them. */ :not(_).x-turn .x-turn-slot { display: none; } :not(_):where(.x-turn .x-turn-txt) { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 8vh 5vw; } :not(_)[data-motion="expressive"] .x-turn { height: calc(100vh - var(--hdr, 0px) + (var(--np, 4) - 1) * var(--turn-step, 75vh)); } :not(_)[data-motion="expressive"] .x-turn .x-turn-stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); overflow: clip; transition: background-color var(--turn-tone-dur, .5s), color var(--turn-tone-dur, .5s); } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot { display: block; position: absolute; inset-inline-start: var(--turn-x, 50%); top: var(--turn-y, 50%); height: var(--turn-h, 62vh); width: calc(var(--turn-h, 62vh) * var(--turn-ratio, .7)); transform: translate(calc(-50% * var(--dirx, 1)), -50%); perspective: var(--turn-depth, 1600px); z-index: 2; } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0% 50%; backface-visibility: hidden; will-change: transform; } :not(_):where(.x-turn .x-turn-slot) { border-radius: var(--turn-radius, 14px); } /* the frame of the scene decides the rounding: a skin's rounded-… on it or the site's frame parameter win */ :not(_):where([data-motion="expressive"] .x-turn .x-turn-slot img) { border-radius: inherit; box-shadow: var(--turn-shadow, 0 30px 60px rgba(0,0,0,.25)); } /* a skin's own shadow-… class wins */ :not(_)[data-motion="expressive"] .x-turn .x-turn-txt { position: absolute; inset: 0; align-items: center; z-index: 1; grid-template-columns: 1fr calc(var(--turn-h, 62vh) * var(--turn-ratio, .7)) 1fr; will-change: transform, opacity; } :not(_):where([data-motion="expressive"] .x-turn .x-turn-txt) { padding: 0 5vw; gap: 3vw; } /* a skin's own px-… / gap-… classes win */ :not(_)[data-motion="expressive"] .x-turn .x-turn-txt .t-l { grid-column: 1; text-align: right; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt .t-r { grid-column: 3; } @media (prefers-reduced-motion: reduce) { :not(_)[data-motion="expressive"] .x-turn { height: auto; } :not(_)[data-motion="expressive"] .x-turn .x-turn-stage { position: relative; height: auto; } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot { display: none; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt { position: relative; transform: none !important; opacity: 1 !important; } } /* ways the photo changes in the one card scene (data-turn): cylinder and wheel need the photos' backs hidden and the card's own 3D space */ :not(_)[data-motion="expressive"] .x-turn .x-turn-slot { transform-style: preserve-3d; } :not(_)[data-motion="expressive"] .x-turn[data-turn="wheel"] .x-turn-slot, :not(_)[data-motion="expressive"] .x-turn[data-turn="stack"] .x-turn-slot, :not(_)[data-motion="expressive"] .x-turn[data-turn="reveal"] .x-turn-slot, :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-slot { transform-style: flat; perspective: none; } /* "around the centre": as the projects of Foudre — the text on the left, the cards on an arc on the right (the neighbours would cover side texts) */ :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-slot { inset-inline-start: var(--turn-x, 64%); } :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-txt { grid-template-columns: minmax(0, var(--turn-text-w, 36%)) 1fr; align-content: center; row-gap: var(--turn-text-gap, 1.2rem); } :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-txt .t-l, :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-txt .t-r { grid-column: 1; text-align: start; } :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-txt .t-l { align-self: end; } :not(_)[data-motion="expressive"] .x-turn[data-turn="orbit"] .x-turn-txt .t-r { align-self: start; } /* "ring": same layout as "around the centre" — the text on the left, the ring on the right */ :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-slot { inset-inline-start: var(--turn-x, 66%); } :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-txt { grid-template-columns: minmax(0, var(--turn-text-w, 34%)) 1fr; align-content: center; row-gap: var(--turn-text-gap, 1.2rem); } :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-txt .t-l, :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-txt .t-r { grid-column: 1; text-align: start; } :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-txt .t-l { align-self: end; } :not(_)[data-motion="expressive"] .x-turn[data-turn="ring"] .x-turn-txt .t-r { align-self: start; } /* extra photos of the scene are seen only in "from behind" (a ring needs more photos than there are steps); that ring stands on the right of the text */ :not(_).x-turn .x-turn-slot img[data-extra] { display: none; } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-slot img[data-extra] { display: block; } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-slot { inset-inline-start: var(--turn-x, 66%); } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-txt { grid-template-columns: minmax(0, var(--turn-text-w, 32%)) 1fr; align-content: center; row-gap: var(--turn-text-gap, 1.2rem); } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-txt .t-l, :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-txt .t-r { grid-column: 1; text-align: start; } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-txt .t-l { align-self: end; } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-txt .t-r { align-self: start; } :not(_).x-turn-refl { display: none; } :not(_)[data-motion="expressive"] .x-turn[data-turn="swap"] .x-turn-refl { display: block; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: center / cover no-repeat; transform-origin: 50% 50%; will-change: transform; -webkit-mask-image: linear-gradient(to top, #000, transparent var(--turn-refl-fade, 45%)); mask-image: linear-gradient(to top, #000, transparent var(--turn-refl-fade, 45%)); } /* without movement (calm, medium, reduced motion) every scene is an ordinary section (owner 2026-10-14: "without movement many effects are rubbish") */ :not(_).x-steps-count, :not(_).x-deck-count { display: none; } /* the section parameter counter: off (params.ts) — the scene without its frame counter, the skin unchanged */ :not(_)[data-s-counter="off"] .x-steps-count, :not(_)[data-s-counter="off"] .x-deck-count { display: none !important; } :not(_)[data-motion="expressive"] .x-steps-count, :not(_)[data-motion="expressive"] .x-deck-count { display: block; } :not(_):where(.x-deck .x-deck-head) { flex: 1 1 100%; margin-bottom: 1rem; } @media (prefers-reduced-motion: reduce) { :not(_).x-steps-count, :not(_).x-deck-count { display: none !important; } :not(_)[data-motion="expressive"] .x-deck .x-deck-head { position: static; max-width: none; } } /* one card position without movement: rows «text — its photo» (the photos were hidden, only the texts stayed) */ html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr minmax(0, var(--turn-calm-photo, 30vw)); align-items: center; } :not(_):where(html:not([data-motion="expressive"]) .x-turn .x-turn-stage) { column-gap: 5vw; row-gap: 8vh; padding: 14vh 5vw; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot { display: contents; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img { position: static; display: block; grid-column: 2; width: 100%; height: auto; object-fit: cover; transform: none !important; opacity: 1 !important; filter: none !important; } :not(_):where(html:not([data-motion="expressive"]) .x-turn .x-turn-slot img) { border-radius: inherit; aspect-ratio: 4 / 5; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img[data-extra] { display: none !important; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt { position: static; grid-column: 1; display: block; padding: 0; transform: none !important; opacity: 1 !important; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt .t-l, html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt .t-r { display: block; text-align: left; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-refl { display: none; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(1 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(1 of :not([data-extra])) { grid-row: 1; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(2 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(2 of :not([data-extra])) { grid-row: 2; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(3 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(3 of :not([data-extra])) { grid-row: 3; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(4 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(4 of :not([data-extra])) { grid-row: 4; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(5 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(5 of :not([data-extra])) { grid-row: 5; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(6 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(6 of :not([data-extra])) { grid-row: 6; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(7 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(7 of :not([data-extra])) { grid-row: 7; } html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-txt:nth-child(8 of .x-turn-txt), html:not(_):not([data-motion="expressive"]) .x-turn .x-turn-slot img:nth-child(8 of :not([data-extra])) { grid-row: 8; } @media (prefers-reduced-motion: reduce) { :not(_)[data-motion="expressive"] .x-turn { height: auto; } :not(_)[data-motion="expressive"] .x-turn .x-turn-stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr minmax(0, var(--turn-calm-photo, 30vw)); align-items: center; } :not(_):where([data-motion="expressive"] .x-turn .x-turn-stage) { column-gap: 5vw; row-gap: 8vh; padding: 14vh 5vw; } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot { display: contents; } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img { position: static; display: block; grid-column: 2; width: 100%; height: auto; object-fit: cover; transform: none !important; opacity: 1 !important; filter: none !important; } :not(_):where([data-motion="expressive"] .x-turn .x-turn-slot img) { border-radius: inherit; aspect-ratio: 4 / 5; } :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img[data-extra] { display: none !important; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt { position: static; grid-column: 1; display: block; padding: 0; transform: none !important; opacity: 1 !important; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt .t-l, :not(_)[data-motion="expressive"] .x-turn .x-turn-txt .t-r { display: block; text-align: left; } :not(_)[data-motion="expressive"] .x-turn .x-turn-refl { display: none; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(1 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(1 of :not([data-extra])) { grid-row: 1; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(2 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(2 of :not([data-extra])) { grid-row: 2; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(3 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(3 of :not([data-extra])) { grid-row: 3; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(4 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(4 of :not([data-extra])) { grid-row: 4; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(5 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(5 of :not([data-extra])) { grid-row: 5; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(6 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(6 of :not([data-extra])) { grid-row: 6; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(7 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(7 of :not([data-extra])) { grid-row: 7; } :not(_)[data-motion="expressive"] .x-turn .x-turn-txt:nth-child(8 of .x-turn-txt), :not(_)[data-motion="expressive"] .x-turn .x-turn-slot img:nth-child(8 of :not([data-extra])) { grid-row: 8; } } /* ---------- the first screen (concept 7.2 item 13; chosen by the owner on cs-motion-lab/first, 2026-10-16) ---------- On load (any level): f-seq (the children of a box come one after another), f-unveil (+ f-circle: the photo frame opens), f-live (the photo slowly zooms and drifts), f-curtain (the section opens like a curtain), f-slides (+ f-wipe: the photos of the frame change on time), f-collage (its photos come one by one). The rest of the first screen by the existing classes: m-lines (lines), m-count (counters), marquee (running line), p-compare, p-tabs, a carousel with arrows and dots. Start: the class f-go on (the script, when the first photo is ready, 0.7 s at most). Nothing starts fully transparent: Chrome does not count a transparent element as shown (LCP, web.dev; measured 2026-10-16: 1524 → 136 ms); the hidden start only with JavaScript on (html.js); if the motion script does not come, the page's own head script starts all after 3 s (page3.ts) — not a CSS animation: Firefox held the start of an animation still in its delay and the text stayed transparent until the 3 s (2026-10-16). On leaving the screen (expressive): f-zoom (photo frame), f-layers (with f-bg / f-fg marks), f-title-out, f-grow (+ f-grow-photo), f-bigword, f-collage; f-mouse (layers after the mouse, a computer only). --fx (0 … 1, the screen has left) is set by the script. */ @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion].js .f-seq > * { opacity: var(--seq-from, .01); transform: translateY(var(--seq-shift, 28px)); } :not(_)[data-motion].f-go .f-seq > * { opacity: 1; transform: none; transition: opacity var(--seq-dur, .8s) ease, transform var(--seq-dur, .9s) var(--ease, cubic-bezier(.2,.7,.2,1)); transition-delay: calc(var(--seq-delay, .1s) + var(--i, 0) * var(--seq-step, .12s)); } /* the photo starts as a strip / a dot, never fully clipped: Chrome counts a fully clipped photo as not shown, like a transparent one (LCP; the release check, 2026-10-16: mof/home 252 → 2468 ms with inset(0 0 100% 0)) */ :not(_)[data-motion] .f-unveil { clip-path: var(--unveil-from, inset(0 0 calc(100% - var(--unveil-strip, 6px)) 0)); } :not(_)[data-motion] .f-unveil.f-circle { clip-path: circle(var(--circle-from, 3%) at var(--circle-at, 60% 45%)); } :not(_)[data-motion] .f-unveil img, :not(_)[data-motion] .f-unveil video { transform: scale(var(--funveil-zoom, 1.18)); } :not(_)[data-motion].f-go .f-unveil { clip-path: inset(0 0 0 0); transition: clip-path var(--unveil-dur, 1.3s) var(--unveil-ease, cubic-bezier(.7,0,.2,1)) var(--unveil-delay, .2s); } :not(_)[data-motion].f-go .f-unveil.f-circle { clip-path: circle(var(--circle-to, 150%) at var(--circle-at, 60% 45%)); transition-duration: var(--circle-dur, 1.6s); } :not(_)[data-motion].f-go .f-unveil img, :not(_)[data-motion].f-go .f-unveil video { transform: none; transition: transform var(--funveil-zoom-dur, 1.9s) var(--ease, cubic-bezier(.2,.7,.2,1)) var(--unveil-delay, .2s); } :not(_)[data-motion].f-go .f-live img { animation: fLive var(--live-dur, 16s) ease-in-out var(--live-delay, 1.6s) infinite alternate; } :not(_).f-curtain-l { position: fixed; inset: 0; z-index: 90; pointer-events: none; } :not(_).f-curtain-l i { position: absolute; left: 0; right: 0; height: var(--curtain-half, 50.5%); background: var(--curtain, var(--c-dark)); transition: transform var(--curtain-dur, 1s) var(--curtain-ease, cubic-bezier(.77,0,.18,1)) var(--curtain-delay, .15s); } :not(_).f-curtain-l i + i { bottom: 0; background: var(--curtain-2, var(--c-accent)); } :not(_).f-curtain-l i:first-child { top: 0; } :not(_).f-curtain-l.f-open i:first-child { transform: translateY(var(--curtain-up, -101%)); } :not(_).f-curtain-l.f-open i + i { transform: translateY(var(--curtain-down, 101%)); } :not(_)[data-motion] .f-slides img { transition: opacity var(--slides-fade, 1.4s) ease, transform var(--slides-zoom-dur, 7s) linear; } :not(_)[data-motion] .f-slides.f-ready img { opacity: 0; z-index: 0; } :not(_)[data-motion] .f-slides.f-ready img.f-on { opacity: 1; transform: scale(var(--slides-zoom, 1.06)); z-index: 2; } :not(_)[data-motion] .f-slides.f-ready img.f-was { opacity: 1; z-index: 1; } :not(_)[data-motion] .f-slides.f-wipe.f-ready img { opacity: 1; clip-path: inset(0 0 0 100%); transition: clip-path var(--slides-wipe, 1.1s) var(--slides-ease, cubic-bezier(.77,0,.18,1)), transform var(--slides-zoom-dur, 7s) linear; } :not(_)[data-motion] .f-slides.f-wipe.f-ready img.f-on, :not(_)[data-motion] .f-slides.f-wipe.f-ready img.f-was { clip-path: inset(0 0 0 0); } :not(_)[data-motion].js .f-collage > * { opacity: var(--collage-from-o, .01); scale: var(--collage-from, .85); } :not(_)[data-motion].f-go .f-collage > * { opacity: 1; scale: 1; transition: opacity var(--collage-fade, .9s) ease, scale var(--fcol-dur, 1.2s) var(--ease, cubic-bezier(.2,.7,.2,1)); transition-delay: calc(var(--fcol-delay, .35s) + var(--i, 0) * var(--collage-step, .15s)); } :not(_)[data-motion].js .f-bigword { opacity: var(--bigword-from-o, .01); translate: calc(var(--bigword-from, 6%) * var(--dirx, 1)) 0; } :not(_)[data-motion].f-go .f-bigword { opacity: 1; translate: 0 0; transition: opacity var(--bigword-fade, 1.4s) ease var(--bigword-delay, .3s), translate var(--bigword-dur, 2.2s) var(--ease, cubic-bezier(.2,.7,.2,1)) var(--bigword-delay, .3s); } } @keyframes fLive { from { transform: none; } to { transform: scale(var(--live-zoom, 1.1)) translate(var(--live-x, -2.5%), var(--live-y, -1.5%)); } } :not(_).f-slides { position: relative; } :not(_).f-slides img:first-child { position: relative; } :not(_).f-slides img + img { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] .f-zoom img, :not(_)[data-motion="expressive"] .f-zoom video { scale: calc(1 + var(--fx, 0) * (var(--exit-zoom, 1.25) - 1)); } :not(_).f-layers { --exit-bg-k: var(--exit-bg, 35%); --exit-fg-k: var(--exit-fg, -18vh); --exit-fade-k: var(--exit-fade, 1.4); } :not(_)[data-motion="expressive"] .f-bg { translate: calc(var(--mx, 0) * var(--mouse-bg-k, 0px)) calc(var(--fx, 0) * var(--exit-bg-k, 0%) + var(--my, 0) * var(--mouse-bg-k, 0px)); } :not(_)[data-motion="expressive"] .f-fg { translate: calc(var(--mx, 0) * var(--mouse-fg-k, 0px)) calc(var(--fx, 0) * var(--exit-fg-k, 0px) + var(--my, 0) * var(--mouse-fg-k, 0px)); opacity: calc(1 - var(--fx, 0) * var(--exit-fade-k, 0)); } @media (hover: hover) and (pointer: fine) { :not(_).f-mouse { --mouse-bg-k: var(--mouse-bg, -18px); --mouse-fg-k: var(--mouse-fg, 10px); } :not(_)[data-motion="expressive"] .f-mouse .f-bg, :not(_)[data-motion="expressive"] .f-mouse .f-fg { transition: translate var(--mouse-ease-dur, .6s) var(--ease, cubic-bezier(.2,.7,.2,1)); } } :not(_)[data-motion="expressive"] .f-title-out :is(h1, [data-role="heading"]) { transform-origin: var(--title-out-at, 0 100%); transform: translateY(calc(var(--fx, 0) * var(--exit-title-y, -22vh))) scale(calc(1 - var(--fx, 0) * var(--exit-title-shrink, .12))); opacity: calc(1 - var(--fx, 0) * var(--exit-title-fade, 1.3)); } :not(_)[data-motion="expressive"] .f-bigword { transform: translateX(calc(var(--fx, 0) * var(--bigword-move, -30%) * var(--dirx, 1))); } :not(_)[data-motion="expressive"] .f-collage > * { transform: translateY(calc(var(--fx, 0) * var(--fd, -30vh))); } :not(_)[data-motion="expressive"] .f-collage > :nth-child(4n+1) { --fd: var(--fcol-a, -55vh); } :not(_)[data-motion="expressive"] .f-collage > :nth-child(4n+2) { --fd: var(--fcol-b, -20vh); } :not(_)[data-motion="expressive"] .f-collage > :nth-child(4n+3) { --fd: var(--fcol-c, -38vh); } :not(_)[data-motion="expressive"] .f-collage > :nth-child(4n) { --fd: var(--fcol-d, -70vh); } /* f-grow: the section holds while its photo grows to the whole screen (the script: --gy holds the content, --gp the growth, the layer) */ :not(_)[data-motion="expressive"] .f-grow.f-grow-on { margin-bottom: var(--grow-run, 90vh); } /* the section keeps its own height (its content stays where the skin put it); the hold is the room under it */ :not(_)[data-motion="expressive"] .f-grow.f-grow-on > * { translate: 0 var(--gy, 0px); } :not(_)[data-motion="expressive"] .f-grow.f-grow-on > :not(.f-grow-layer) { opacity: calc(1 - var(--gp, 0) * var(--grow-fade, 1.8)); } :not(_).f-grow-layer { position: absolute; left: 0; right: 0; top: 0; height: var(--grow-screen, 100svh); z-index: 5; pointer-events: none; clip-path: inset(calc(var(--g-t, 0px) * (1 - var(--gp, 0))) calc(var(--g-r, 0px) * (1 - var(--gp, 0))) calc(var(--g-b, 0px) * (1 - var(--gp, 0))) calc(var(--g-l, 0px) * (1 - var(--gp, 0))) round calc(var(--grow-radius, 0px) * (1 - var(--gp, 0)))); } :not(_).f-grow-layer img { width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 760px) { :not(_):root { --seq-shift: 18px; --funveil-zoom: 1.1; --live-zoom: 1.06; --exit-zoom: 1.12; --exit-bg: 20%; --exit-fg: -10vh; --exit-title-y: -12vh; --bigword-move: -18%; --fcol-a: -30vh; --fcol-b: -12vh; --fcol-c: -22vh; --fcol-d: -40vh; --grow-run: 60vh; } } /* carousel dots (the platform script makes one button per item of the carousel of the same section; the current one is aria-current) */ :not(_):where([data-carousel-dots]) { display: flex; gap: .5rem; } :not(_):where([data-carousel-dots] button) { width: .55rem; height: .55rem; border-radius: 99px; border: 0; padding: 0; background: color-mix(in srgb, currentColor 25%, transparent); cursor: pointer; transition: width .35s cubic-bezier(.2,.7,.2,1), background .35s; } :not(_):where([data-carousel-dots] button[aria-current="true"]) { width: 1.75rem; background: var(--c-accent); } /* ---------- between the blocks (vip; concept 7.2 item 13, chosen by the owner on cs-motion-lab/between, 2026-10-16) — like the footer revealed from under the page: one part holds, the other moves. On a section of a skin (the class on its root): b-under (the section waits under the ones before it, which slide up off it), b-stack (consecutive b-stack sections stick and the next slides over; the one below shrinks and darkens — the script sets --k and, for a section taller than the screen, its top), b-window (+ an img.b-photo: a still photo seen through the band), b-over (+ an img.b-photo right inside and a .b-cards: the photo pinned for the section, the cards float over it). Not vip or reduced motion: plain sections (the photo of b-window fills its band, b-over shows the photo, then the cards). */ :not(_).b-window { position: relative; overflow: clip; } :not(_).b-window img.b-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } :not(_).b-over img.b-photo { display: block; width: 100%; object-fit: cover; } :not(_):where(.b-over img.b-photo) { height: 70vh; } @media (prefers-reduced-motion: no-preference) { :not(_)[data-motion="expressive"] main > :has(~ .b-under) { position: relative; z-index: 1; } :not(_)[data-motion="expressive"] main > :has(+ .b-under) { box-shadow: var(--under-shadow, 0 30px 60px rgba(0,0,0,.25)); } :not(_)[data-motion="expressive"] .b-under { position: sticky; bottom: 0; z-index: 0; } :not(_)[data-motion="expressive"] .b-stack { position: sticky; top: var(--stack-at, 0px); z-index: 1; transform-origin: 50% 0; transform: scale(calc(1 - var(--k, 0) * var(--stack-shrink, .08))); filter: brightness(calc(1 - var(--k, 0) * var(--stack-dim, .35))); } :not(_)[data-motion="expressive"] .b-stack + .b-stack { border-radius: var(--stack-radius, 28px) var(--stack-radius, 28px) 0 0; box-shadow: var(--stack-shadow, 0 -20px 50px rgba(0,0,0,.18)); } :not(_)[data-motion="expressive"] main > .b-stack ~ :not(.b-stack) { position: relative; z-index: 2; } :not(_)[data-motion="expressive"] .b-window { clip-path: inset(0 0 0 0); overflow: visible; } :not(_)[data-motion="expressive"] .b-window img.b-photo { position: fixed; } :not(_)[data-motion="expressive"] .b-over img.b-photo { position: sticky; top: 0; height: var(--over-photo-h, 100vh); } :not(_)[data-motion="expressive"] .b-over .b-cards { position: relative; margin-top: var(--over-up, -100vh); } /* minus the height of the photo (--over-photo-h) */ :not(_):where([data-motion="expressive"] .b-over .b-cards) { padding: 60vh 6vw 30vh; display: grid; gap: 55vh; } } /* smooth scroll (Lenis 1.3.26, its lenis.css) */ html:not(_).lenis, html:not(_).lenis body { height: auto; } :not(_).lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } :not(_).lenis [data-lenis-prevent], :not(_).lenis [data-lenis-prevent-wheel], :not(_).lenis [data-lenis-prevent-touch], :not(_).lenis [data-lenis-prevent-vertical], :not(_).lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } :not(_).lenis.lenis-smooth iframe { pointer-events: none; } :not(_).lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } html:not(_).lenis { scroll-behavior: auto; } /* while the smooth scroll is stopped (a photo full screen) the page keeps the place of its scroll bar — it no longer jumps sideways (owner 2026-10-15 on mox: width 1425 → 1440 → 1425 px when a photo opened and closed) */ html:not(_).lenis.lenis-stopped { overflow: hidden; scrollbar-gutter: stable; } /* ---------- the form inside a skin ---------- */ .p-form { display: grid; gap: var(--form-gap, 1rem); } .p-form label { display: grid; gap: var(--form-label-gap, .5rem); font-size: var(--form-label-size, .875rem); font-weight: var(--form-label-weight, 500); color: var(--form-label-color, var(--c-text)); } .p-form input { width: 100%; border-radius: var(--form-radius, .75rem); border: var(--form-border-w, 2px) solid var(--form-border, color-mix(in srgb, var(--c-text) 20%, transparent)); background: var(--form-bg, var(--c-surface)); padding: var(--form-pad, .75rem 1rem); font-size: var(--form-size, 1rem); color: var(--form-color, var(--c-text)); outline: none; box-shadow: var(--form-shadow, 0 1px 2px rgba(0,0,0,.05)); } .p-form input:focus { border-color: var(--form-focus, var(--c-primary)); box-shadow: 0 0 0 var(--form-ring, 4px) color-mix(in srgb, var(--form-focus, var(--c-primary)) var(--form-ring-mix, 15%), transparent); } .p-form button[type=submit] { margin-top: var(--form-submit-gap, .5rem); border: 0; border-radius: var(--form-submit-radius, 999px); background: var(--form-submit-bg, var(--c-primary)); color: var(--form-submit-fg, #fff); padding: var(--form-submit-pad, 1rem 1.75rem); font-size: var(--form-submit-size, 1rem); font-weight: var(--form-submit-weight, 600); cursor: pointer; } .p-form button[type=submit]:hover { opacity: var(--form-submit-hover, .9); } /* checking the fields before sending (owner 2026-10-16: «валидация выборочно»): the hint under a field and its frame — both forms of the platform (the skin-drawn one and the plain one); levers --form-error-* */ form[data-platform-form] [data-err] { display: block; margin-top: var(--form-error-gap, .25rem); font-size: var(--form-error-size, .8125rem); font-weight: var(--form-error-weight, 500); color: var(--form-error-color, #c0392b); } form[data-platform-form] [data-err][hidden] { display: none; } form[data-platform-form] [data-hp] { display: none !important; } form[data-platform-form] input[aria-invalid="true"] { border-color: var(--form-error-border, var(--form-error-color, #c0392b)); } /* the header switches to its dropdown on a computer when its menu does not fit in one line (owner 2026-10-16, trial site mof: ten items wrapped into narrow columns of two or three lines and no check saw it). The platform script measures it (motion.ts PLATFORM_JS) and sets data-fit: "burger" — the row of links is hidden and the menu button with its dropdown is used; "burger-all" — the action button goes too. The classic header (the link row is its dropdown) is not switched; the proportion check reports its wrapping. */ header[data-fit] [data-hdr="nav"] { display: none !important; } header[data-fit] label[for="nav-t"] { display: block !important; } header[data-fit] input:checked ~ [data-hdr="panel"][data-show="flex"] { display: flex !important; } header[data-fit] input:checked ~ [data-hdr="panel"][data-show="grid"] { display: grid !important; } header[data-fit="burger-all"] [data-hdr="cta"] { display: none !important; } header[data-fit] [data-hdr="cta"] { margin-inline-start: auto; } header[data-fit-wait] [data-hdr="nav"], header[data-fit-wait] label[for="nav-t"] { visibility: hidden; } /* until the site's font is measured (headers.ts FIT_JS) */ /* the action stands by the menu button, not in the middle */ /* ---------- levers of the platform's parts (site data header / footer / action_bar .levers) ---------- */ /* with levers the name never shrinks under the menu and a menu item never breaks into two lines (2026-10-15, trial site mov: larger name, links and gap made the menu wider than the bar — the name ran over «Головна»); a bar too narrow then widens the page, which the proportion check reports */ header[data-lv] [data-hdr="brand"] { flex-shrink: 0; } header[data-lv] [data-hdr="link"] { white-space: nowrap; } header[data-lv~="max"] [data-hdr="bar"] { max-width: var(--hdr-max); } header[data-lv~="px"] [data-hdr="bar"] { padding-left: var(--hdr-px); padding-right: var(--hdr-px); } header[data-lv~="py"] [data-hdr="bar"] { padding-top: var(--hdr-py); padding-bottom: var(--hdr-py); } header[data-lv~="brand"] [data-hdr="brand"] { font-size: var(--hdr-brand); } header[data-lv~="logo"] [data-hdr="logo"] { height: var(--hdr-logo); } header[data-lv~="gap"] [data-hdr="nav"] { gap: var(--hdr-gap); } header[data-lv~="link"] [data-hdr="link"] { font-size: var(--hdr-link); } @media (min-width: 1280px) { header[data-lv~="px-xl"] [data-hdr="bar"] { padding-left: var(--hdr-px-xl); padding-right: var(--hdr-px-xl); } header[data-lv~="py-xl"] [data-hdr="bar"] { padding-top: var(--hdr-py-xl); padding-bottom: var(--hdr-py-xl); } header[data-lv~="brand-xl"] [data-hdr="brand"] { font-size: var(--hdr-brand-xl); } } footer[data-lv~="max"] [data-ftr="bar"] { max-width: var(--ftr-max); } footer[data-lv~="px"] [data-ftr="bar"] { padding-left: var(--ftr-px); padding-right: var(--ftr-px); } footer[data-lv~="py"] [data-ftr="bar"] { padding-top: var(--ftr-py); padding-bottom: var(--ftr-py); } footer[data-lv~="gap"] [data-ftr="bar"] { gap: var(--ftr-gap); } footer[data-lv~="brand"] [data-ftr="brand"] { font-size: var(--ftr-brand); } footer[data-lv~="link"] [data-ftr="link"] { font-size: var(--ftr-link); } [data-part="bar"][data-lv~="radius"] a { border-radius: var(--bar-radius); } [data-part="bar"][data-lv~="size"] a { font-size: var(--bar-size); } [data-part="bar"][data-lv~="bottom"] { bottom: var(--bar-bottom); } [data-v="2"] .s-lines-1,[data-v="2"] .s-lines-2,[data-v="2"] .s-lines-3,[data-v="2"] .s-lines-4,[data-v="2"] .s-lines-5,[data-v="2"] .s-lines-6,[data-v="2"] .s-lines-7,[data-v="2"] .s-lines-8,[data-v="2"] .s-lines-9,[data-v="2"] .s-lines-10{display:-webkit-box;-webkit-box-orient:vertical;overflow:clip;overflow-clip-margin:var(--slot-allowance,.1em);overflow-wrap:break-word;hyphens:manual}[data-v="2"] .s-lines-1{-webkit-line-clamp:1;line-clamp:1}[data-v="2"] .s-lines-2{-webkit-line-clamp:2;line-clamp:2}[data-v="2"] .s-lines-3{-webkit-line-clamp:3;line-clamp:3}[data-v="2"] .s-lines-4{-webkit-line-clamp:4;line-clamp:4}[data-v="2"] .s-lines-5{-webkit-line-clamp:5;line-clamp:5}[data-v="2"] .s-lines-6{-webkit-line-clamp:6;line-clamp:6}[data-v="2"] .s-lines-7{-webkit-line-clamp:7;line-clamp:7}[data-v="2"] .s-lines-8{-webkit-line-clamp:8;line-clamp:8}[data-v="2"] .s-lines-9{-webkit-line-clamp:9;line-clamp:9}[data-v="2"] .s-lines-10{-webkit-line-clamp:10;line-clamp:10}[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-1:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-2:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-3:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-4:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-5:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-6:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-7:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-8:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-9:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]),[data-v="2"] :is(span,a,b,strong,em,small,i,label).s-lines-10:not([class*="block"],[class*="flex"],[class*="grid"],[class*="table"]){display:inline;overflow:visible}[data-v="2"] .s-lines-1,[data-v="2"] .s-lines-2,[data-v="2"] .s-lines-3,[data-v="2"] .s-lines-4,[data-v="2"] .s-lines-5,[data-v="2"] .s-lines-6,[data-v="2"] .s-lines-7,[data-v="2"] .s-lines-8,[data-v="2"] .s-lines-9,[data-v="2"] .s-lines-10{min-width:min-content}[data-v="2"] :is(td,th).s-lines-1,[data-v="2"] :is(td,th).s-lines-2,[data-v="2"] :is(td,th).s-lines-3,[data-v="2"] :is(td,th).s-lines-4,[data-v="2"] :is(td,th).s-lines-5,[data-v="2"] :is(td,th).s-lines-6,[data-v="2"] :is(td,th).s-lines-7,[data-v="2"] :is(td,th).s-lines-8,[data-v="2"] :is(td,th).s-lines-9,[data-v="2"] :is(td,th).s-lines-10{display:table-cell;overflow:visible}[data-v="2"] .s-num{white-space:nowrap}[data-v="2"] img{max-width:100%}[data-v="2"] :is(h1,h2,h3,h4,p,li,a,span,dd,dt,figcaption){overflow-wrap:break-word}[data-more-on]>[data-item]:nth-child(n+7 of [data-item]){display:none}.slots-more{display:flex;justify-content:center;margin-top:var(--more-gap,1.5rem)}.slots-more button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:var(--more-radius,999px);padding:var(--more-pad,.6em 1.4em);cursor:pointer;opacity:.85}.slots-read{font:inherit;font-size:.85em;color:inherit;background:none;border:0;padding:.2em 0 0;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;opacity:.75}dialog.slots-dialog{max-width:min(40rem,92vw);max-height:85vh;overflow:auto;border:0;border-radius:var(--dialog-radius,1rem);padding:var(--dialog-pad,1.5rem 1.5rem 1.25rem);background:var(--c-base,#fff);color:var(--on-base,#111)}dialog.slots-dialog::backdrop{background:rgba(0,0,0,var(--dialog-shade,.45))}dialog.slots-dialog p{margin:0 0 .75em;overflow-wrap:anywhere}dialog.slots-dialog .slots-close{float:right;font:inherit;background:none;border:0;cursor:pointer;color:inherit;opacity:.7;margin:-.4em -.4em 0 0;padding:.4em}:where(:lang(ar),:lang(fa),:lang(ur)),:where(:lang(ar),:lang(fa),:lang(ur)) *{letter-spacing:0!important}:where(:lang(ar),:lang(fa),:lang(hi),:lang(mr),:lang(bn),:lang(th)){--slot-allowance:.35em}:where(:lang(ur)){--slot-allowance:.8em}:where(:lang(hi),:lang(mr),:lang(th)) :is(h1,h2,h3,h4,h5,h6){line-height:1.3!important}:where(:lang(bn)) :is(h1,h2,h3,h4,h5,h6){line-height:1.25!important}:where(:lang(ar),:lang(fa)) :is(h1,h2,h3,h4,h5,h6){line-height:1.4!important}:where(:lang(ur)) :is(h1,h2,h3,h4,h5,h6){line-height:2!important}:where(:lang(ar),:lang(fa),:lang(hi),:lang(mr),:lang(bn),:lang(th)) :is(p,li,dd,dt,blockquote,td,th){line-height:1.7!important}:where(:lang(ur)) :is(p,li,dd,dt,blockquote,td,th){line-height:2.2!important}:where(:lang(ja),:lang(ko),:lang(zh)){line-break:strict}:where(:lang(ko)) *{word-break:keep-all}:where(:lang(ja)) :is(h1,h2,h3,h4,h5,h6){word-break:auto-phrase}:where(:lang(ja),:lang(ko),:lang(zh)) *{font-style:normal!important}:where(:lang(ja),:lang(ko),:lang(zh)) :is(h1,h2,h3,h4,h5,h6){line-height:1.4!important}:where(:lang(ja),:lang(ko),:lang(zh)) :is(p,li,dd,dt,blockquote,td,th){line-height:1.8!important}[dir="rtl"]{--dirx:-1}[dir="rtl"] svg[data-mirror]{scale:-1 1}