/* GENERATED by build/build.mjs — do not edit. * HeyOz design tokens. Import once, before Tailwind. * Light is the default; add class="dark" (or data-theme="dark") to flip. */ @layer base { :root { color-scheme: light; /* Reserve the classic scrollbar's track permanently. color-scheme above decides what the native scrollbar LOOKS like; this decides whether it takes up room, and the two belong together. A classic scrollbar is 15px of real layout width. Any overlay that locks the page — every dialog, sheet, menu and command palette there will ever be — turns the page's scrollbar off, the scrollport gains those 15px back, and the whole document reflows sideways under the thing that just opened. Measured on this showcase before this line existed: layout width 1265 → 1280, header right edge and sidebar both moving 14.86px, on every single dialog open. Reserving the gutter up front means removing the scrollbar changes nothing, and it fixes the class of bug rather than one instance: a component does not have to know about scrollbars, and the next overlay someone writes inherits the fix instead of re-earning the bug. The alternative — measuring the width in JS and padding the body — compensates the document and NOT position: fixed elements, which is how a compensated app ends up with a sticky header that still jumps. The cost is 15px of reserved gutter on a page short enough not to scroll, and only where scrollbars are classic: overlay scrollbars (macOS, iOS, Android, and headless Chromium) reserve nothing, so this is a Windows-and-Linux-desktop trade. A permanently steady 15px beats an intermittent 15px jump. Browsers without support — Safari below 18.2 — fall back inside .oz-scroll-lock below. */ scrollbar-gutter: stable; /* ---- foundations, motion, typography (mode-independent) ---- */ --oz-space-1: 4px; --oz-space-2: 6px; --oz-space-3: 8px; --oz-space-4: 12px; --oz-space-5: 16px; --oz-space-6: 20px; --oz-space-7: 24px; --oz-space-8: 28px; --oz-space-9: 32px; --oz-space-10: 36px; --oz-space-11: 40px; --oz-space-12: 48px; --oz-space-13: 56px; --oz-space-14: 64px; --oz-space-15: 72px; --oz-space-16: 80px; --oz-space-17: 96px; --oz-space-18: 120px; --oz-radius-1: 2px; --oz-radius-2: 4px; --oz-radius-3: 6px; --oz-radius-4: 8px; --oz-radius-5: 10px; --oz-radius-6: 12px; --oz-radius-7: 14px; --oz-radius-8: 16px; --oz-radius-9: 20px; --oz-radius-10: 24px; --oz-radius-11: 32px; --oz-radius-12: 40px; --oz-radius-full: 1000px; --oz-stroke-1: 0.5px; --oz-stroke-2: 1px; --oz-stroke-3: 1.5px; --oz-stroke-4: 2px; --oz-stroke-5: 2.5px; --oz-stroke-6: 4px; --oz-focus-ring-width: 2px; --oz-focus-ring-offset: 2px; --oz-target-min: 44px; --oz-target-comfortable: 48px; --oz-icon-sm: 16px; --oz-icon-md: 20px; --oz-icon-lg: 24px; --oz-icon-xl: 32px; --oz-icon-stroke: 2px; --oz-layer-base: 0; --oz-layer-dropdown: 1000; --oz-layer-sticky: 1100; --oz-layer-overlay: 1200; --oz-layer-modal: 1300; --oz-layer-popover: 1400; --oz-layer-toast: 1500; --oz-layer-tooltip: 1600; --oz-bp-sm: 480px; --oz-bp-md: 768px; --oz-bp-lg: 1024px; --oz-bp-xl: 1280px; --oz-container-sm: 640px; --oz-container-md: 768px; --oz-container-lg: 1024px; --oz-container-xl: 1280px; --oz-container-gutter: 24px; --oz-container-measure: 65ch; --oz-spring-effects-fast: linear(0, 0.024, 0.0823, 0.1594, 0.2448, 0.3315, 0.4153, 0.4934, 0.5646, 0.6283, 0.6845, 0.7335, 0.7758, 0.8122, 0.8432, 0.8695, 0.8916, 0.9102, 0.9258, 0.9388, 0.9496, 0.9586, 0.9661, 0.9722, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1); --oz-spring-effects-fast-ms: 120ms; --oz-spring-effects-default: linear(0, 0.024, 0.0823, 0.1594, 0.2448, 0.3315, 0.4153, 0.4934, 0.5646, 0.6283, 0.6845, 0.7335, 0.7758, 0.8122, 0.8432, 0.8695, 0.8916, 0.9102, 0.9258, 0.9388, 0.9496, 0.9586, 0.9661, 0.9722, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1); --oz-spring-effects-default-ms: 180ms; --oz-spring-effects-slow: linear(0, 0.024, 0.0823, 0.1594, 0.2448, 0.3315, 0.4153, 0.4934, 0.5646, 0.6283, 0.6845, 0.7335, 0.7758, 0.8122, 0.8432, 0.8695, 0.8916, 0.9102, 0.9258, 0.9388, 0.9496, 0.9586, 0.9661, 0.9722, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1); --oz-spring-effects-slow-ms: 280ms; --oz-spring-spatial-fast: linear(0, 0.0218, 0.0765, 0.1513, 0.2366, 0.3254, 0.413, 0.4962, 0.573, 0.6424, 0.7039, 0.7575, 0.8037, 0.8429, 0.8758, 0.9032, 0.9256, 0.9438, 0.9584, 0.9699, 0.979, 0.9859, 0.9912, 0.9951, 0.998, 1, 1.0014, 1.0022, 1.0027, 1.0029, 1.003, 1.0029, 1.0027, 1.0024, 1.0022, 1.0019, 1.0017, 1.0014, 1.0012, 1); --oz-spring-spatial-fast-ms: 190ms; --oz-spring-spatial-default: linear(0, 0.0217, 0.0767, 0.1527, 0.2402, 0.3321, 0.4233, 0.5104, 0.591, 0.6637, 0.7281, 0.784, 0.8317, 0.8718, 0.9049, 0.9318, 0.9534, 0.9702, 0.9832, 0.9929, 1, 1.0049, 1.0081, 1.01, 1.0109, 1.0111, 1.0108, 1.0101, 1.0092, 1.0083, 1.0072, 1.0062, 1.0053, 1.0044, 1.0036, 1.0029, 1.0023, 1.0018, 1.0014, 1); --oz-spring-spatial-default-ms: 340ms; --oz-spring-spatial-slow: linear(0, 0.0202, 0.0724, 0.1453, 0.2305, 0.3211, 0.4122, 0.5001, 0.5824, 0.6574, 0.7244, 0.7831, 0.8335, 0.876, 0.9113, 0.9401, 0.963, 0.9809, 0.9944, 1.0043, 1.0113, 1.0159, 1.0185, 1.0198, 1.0199, 1.0192, 1.0179, 1.0164, 1.0146, 1.0128, 1.011, 1.0093, 1.0077, 1.0063, 1.005, 1.0039, 1.003, 1.0022, 1.0015, 1); --oz-spring-spatial-slow-ms: 480ms; --oz-spring-expressive: linear(0, 0.031, 0.1102, 0.2197, 0.3445, 0.4731, 0.5968, 0.7098, 0.8083, 0.8907, 0.9566, 1.0067, 1.0424, 1.0657, 1.0787, 1.0834, 1.0819, 1.076, 1.0673, 1.0571, 1.0463, 1.0359, 1.0262, 1.0177, 1.0105, 1.0047, 1.0002, 0.997, 0.9949, 0.9936, 0.9931, 0.9931, 0.9935, 0.9942, 0.995, 0.9959, 0.9968, 0.9976, 0.9984, 1); --oz-spring-expressive-ms: 520ms; --oz-motion-spatial-scale: 1; --oz-duration-instant: 0ms; --oz-duration-fast: 150ms; --oz-duration-base: 250ms; --oz-duration-slow: 420ms; --oz-duration-slower: 720ms; --oz-duration-ambient: 1500ms; --oz-ease-entrance: cubic-bezier(0.34, 1.56, 0.64, 1); --oz-ease-exit: cubic-bezier(0.4, 0, 1, 1); --oz-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --oz-ease-linear: linear; --oz-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oz-font-heading: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oz-font-body: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oz-font-label: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oz-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --oz-weight-regular: 400; --oz-weight-medium: 500; --oz-weight-semibold: 600; --oz-weight-bold: 700; --oz-weight-extrabold: 800; --oz-text-display-lg: clamp(40px, calc(40px + (64 - 40) * (100vw - 360px) / 880), 64px); --oz-text-display-md: clamp(34px, calc(34px + (52 - 34) * (100vw - 360px) / 880), 52px); --oz-text-display-sm: clamp(28px, calc(28px + (40 - 28) * (100vw - 360px) / 880), 40px); --oz-text-heading-xl: clamp(26px, calc(26px + (36 - 26) * (100vw - 360px) / 880), 36px); --oz-text-heading-lg: clamp(24px, calc(24px + (30 - 24) * (100vw - 360px) / 880), 30px); --oz-text-heading-md: clamp(20px, calc(20px + (24 - 20) * (100vw - 360px) / 880), 24px); --oz-text-heading-sm: 20px; --oz-text-heading-xs: 18px; --oz-text-body-lg: 18px; --oz-text-body-md: 16px; --oz-text-body-sm: 14px; --oz-text-body-xs: 12px; --oz-text-label-md: 14px; --oz-text-label-sm: 12px; --oz-text-label-xs: 10px; --oz-leading-display-lg: 1.0625; --oz-leading-display-md: 1.0769; --oz-leading-display-sm: 1.1; --oz-leading-heading-xl: 1.1111; --oz-leading-heading-lg: 1.2; --oz-leading-heading-md: 1.3333; --oz-leading-heading-sm: 1.4; --oz-leading-heading-xs: 1.3333; --oz-leading-body-lg: 1.5556; --oz-leading-body-md: 1.5; --oz-leading-body-sm: 1.4286; --oz-leading-body-xs: 1.3333; --oz-leading-label-md: 1.1429; --oz-leading-label-sm: 1.3333; --oz-leading-label-xs: 1.2; --oz-tracking-display-lg: -0.02em; --oz-tracking-display-md: -0.02em; --oz-tracking-display-sm: -0.015em; --oz-tracking-heading-xl: -0.015em; --oz-tracking-heading-lg: -0.01em; --oz-tracking-heading-md: -0.01em; --oz-tracking-heading-sm: -0.005em; --oz-tracking-heading-xs: 0em; --oz-tracking-body-lg: 0em; --oz-tracking-body-md: 0em; --oz-tracking-body-sm: 0em; --oz-tracking-body-xs: 0.005em; --oz-tracking-label-md: 0.005em; --oz-tracking-label-sm: 0.01em; --oz-tracking-label-xs: 0.02em; --oz-default-weight-display: 800; --oz-default-weight-heading: 600; --oz-default-weight-body: 400; --oz-default-weight-label: 500; /* ---- semantic: light ---- */ --oz-color-background: #EEEFE9; --oz-color-surface-primary: #E5E7E0; --oz-color-surface-primary-variant: #FDFDF8; --oz-color-surface-secondary: #EAEBE3; --oz-color-surface-secondary-variant: #F4F5EF; --oz-color-surface-tertiary: #D4D6CB; --oz-color-surface-tertiary-variant: #EAEBE3; --oz-color-surface-elevated: #FDFDF8; --oz-color-surface-overlay: #FDFDF8; --oz-color-surface-inverse: #1B1C18; --oz-color-surface-fixed: #FFFFFF; --oz-color-surface-brand: #FBEADF; --oz-color-surface-success: #E7F5EB; --oz-color-surface-warning: #FDF0DE; --oz-color-surface-critical: #FFEAEC; --oz-color-surface-info: #E7F0FF; --oz-color-surface-brand-flat: #FBEADF; --oz-color-surface-success-flat: #E7F5EB; --oz-color-surface-warning-flat: #FDF0DE; --oz-color-surface-critical-flat: #FFEAEC; --oz-color-surface-info-flat: #E7F0FF; --oz-color-fill-primary: #F4F5EF; --oz-color-fill-primary-hover: #EAEBE3; --oz-color-fill-primary-active: #DBDDD3; --oz-color-fill-primary-disabled: #F4F5EF80; --oz-color-fill-primary-variant: #FDFDF8; --oz-color-fill-primary-variant-hover: #F4F5EF; --oz-color-fill-primary-variant-active: #EAEBE3; --oz-color-fill-primary-variant-disabled: #FFFFFF80; --oz-color-fill-secondary: #EAEBE3; --oz-color-fill-secondary-hover: #DBDDD3; --oz-color-fill-secondary-active: #CFD1C7; --oz-color-fill-secondary-disabled: #EAEBE380; --oz-color-fill-secondary-variant: #F4F5EF; --oz-color-fill-secondary-variant-hover: #EAEBE3; --oz-color-fill-secondary-variant-active: #DBDDD3; --oz-color-fill-secondary-variant-disabled: #F4F5EF80; --oz-color-fill-tertiary: #DBDDD3; --oz-color-fill-tertiary-hover: #CFD1C7; --oz-color-fill-tertiary-active: #BFC1B7; --oz-color-fill-tertiary-disabled: #DBDDD380; --oz-color-fill-tertiary-variant: #EAEBE3; --oz-color-fill-tertiary-variant-hover: #DBDDD3; --oz-color-fill-tertiary-variant-active: #CFD1C7; --oz-color-fill-tertiary-variant-disabled: #EAEBE380; --oz-color-fill-elevated: #FDFDF8; --oz-color-fill-elevated-hover: #F4F5EF; --oz-color-fill-elevated-active: #EAEBE3; --oz-color-fill-elevated-disabled: #FFFFFF80; --oz-color-fill-inverse: #1B1C18; --oz-color-fill-inverse-hover: #23241C; --oz-color-fill-inverse-active: #2B2C24; --oz-color-fill-inverse-disabled: #1B1C1880; --oz-color-fill-brand: #F54E00; --oz-color-fill-brand-hover: #D84400; --oz-color-fill-brand-active: #B03A00; --oz-color-fill-brand-disabled: #E5E7E0; /* Button chrome. PostHog's primary control is a face sitting on a hard 3px plate - no blur, no gradient - so it reads as a physical edge that presses when clicked. It needs four values of its own because the face is deliberately NOT the brand colour: brand red on a warm ground is a shout, and the amber face with near-black text is what makes the control loud enough to find and quiet enough to live with. */ --oz-color-chrome-face: #EB9D2A; --oz-color-chrome-edge: #B17816; --oz-color-chrome-shadow: #CD8407; --oz-color-chrome-ink: #1B1C18; --oz-color-fill-success: #1D9156; --oz-color-fill-success-hover: #037944; --oz-color-fill-success-active: #006035; --oz-color-fill-success-disabled: #E5E7E0; --oz-color-fill-warning: #A36E07; --oz-color-fill-warning-hover: #865900; --oz-color-fill-warning-active: #6B4600; --oz-color-fill-warning-disabled: #E5E7E0; --oz-color-fill-critical: #E63C65; --oz-color-fill-critical-hover: #C52450; --oz-color-fill-critical-active: #9D183E; --oz-color-fill-critical-disabled: #E5E7E0; --oz-color-fill-info: #2C74EA; --oz-color-fill-info-hover: #195DCA; --oz-color-fill-info-active: #1049A4; --oz-color-fill-info-disabled: #E5E7E0; --oz-color-fill-brand-secondary: #F97A4526; --oz-color-fill-brand-secondary-hover: #F97A454D; --oz-color-fill-brand-secondary-active: #F54E004D; --oz-color-fill-brand-secondary-disabled: #F97A4514; --oz-color-fill-success-secondary: #4DA97226; --oz-color-fill-success-secondary-hover: #4DA9724D; --oz-color-fill-success-secondary-active: #1D91564D; --oz-color-fill-success-secondary-disabled: #4DA97214; --oz-color-fill-warning-secondary: #BF8B3926; --oz-color-fill-warning-secondary-hover: #BF8B394D; --oz-color-fill-warning-secondary-active: #A36E074D; --oz-color-fill-warning-secondary-disabled: #BF8B3914; --oz-color-fill-critical-secondary: #F5617D26; --oz-color-fill-critical-secondary-hover: #F5617D4D; --oz-color-fill-critical-secondary-active: #E63C654D; --oz-color-fill-critical-secondary-disabled: #F5617D14; --oz-color-fill-info-secondary: #5292FD26; --oz-color-fill-info-secondary-hover: #5292FD4D; --oz-color-fill-info-secondary-active: #2C74EA4D; --oz-color-fill-info-secondary-disabled: #5292FD14; --oz-color-fill-selected: #F97A4526; --oz-color-fill-selected-hover: #F97A454D; --oz-color-fill-selected-active: #F54E004D; --oz-color-fill-selected-disabled: #F97A4514; --oz-color-fill-fixed: #FFFFFF; --oz-color-fill-fixed-disabled: #FFFFFF80; --oz-color-border-primary: #DBDDD3; --oz-color-border-primary-hover: #CFD1C7; --oz-color-border-primary-disabled: #DBDDD380; --oz-color-border-secondary: #C5C7BC; --oz-color-border-secondary-hover: #BFC1B7; --oz-color-border-secondary-disabled: #C5C7BC80; --oz-color-border-tertiary: #BFC1B7; --oz-color-border-tertiary-hover: #A7A99E; --oz-color-border-tertiary-disabled: #BFC1B780; --oz-color-border-elevated: #DBDDD3; --oz-color-border-elevated-hover: #CFD1C7; --oz-color-border-elevated-disabled: #DBDDD380; --oz-color-border-inverse: #1B1C18; --oz-color-border-inverse-hover: #23241C; --oz-color-border-inverse-disabled: #1B1C1880; --oz-color-border-brand: #F54E00; --oz-color-border-brand-hover: #D84400; --oz-color-border-brand-disabled: #F54E0080; --oz-color-border-success: #1D9156; --oz-color-border-success-hover: #037944; --oz-color-border-success-disabled: #1D915680; --oz-color-border-warning: #A36E07; --oz-color-border-warning-hover: #865900; --oz-color-border-warning-disabled: #A36E0780; --oz-color-border-critical: #E63C65; --oz-color-border-critical-hover: #C52450; --oz-color-border-critical-disabled: #E63C6580; --oz-color-border-info: #2C74EA; --oz-color-border-info-hover: #195DCA; --oz-color-border-info-disabled: #2C74EA80; --oz-color-border-focus: #B03A00; --oz-color-border-focus-inverse: #FFFFFF; --oz-color-border-brand-secondary: #F97A454D; --oz-color-border-selected: #D84400; --oz-color-content-primary: #1B1C18; --oz-color-content-secondary: #4A4C43; --oz-color-content-tertiary: #6B6D63; --oz-color-content-placeholder: #6B6D63; --oz-color-content-primary-disabled: #1B1C1880; --oz-color-content-secondary-disabled: #4A4C4380; --oz-color-content-tertiary-disabled: #6B6D6380; --oz-color-content-link: #B03A00; --oz-color-content-link-hover: #8E2F00; --oz-color-content-link-visited: #5F4599; --oz-color-content-selected: #B03A00; --oz-color-content-inverse-primary: #EAEBE3; --oz-color-content-inverse-secondary: #BFC1B7; --oz-color-content-inverse-primary-disabled: #EAEBE380; --oz-color-content-inverse-secondary-disabled: #BFC1B780; --oz-color-content-fixed-primary: #1B1C18; --oz-color-content-fixed-inverse: #FFFFFF; --oz-color-content-fixed-primary-disabled: #1B1C1880; --oz-color-content-fixed-inverse-disabled: #FFFFFF80; --oz-color-content-brand: #B03A00; --oz-color-content-brand-hover: #8E2F00; --oz-color-content-brand-active: #6B2400; --oz-color-content-brand-disabled: #B03A0080; --oz-color-content-success: #006035; --oz-color-content-success-hover: #004725; --oz-color-content-success-active: #013118; --oz-color-content-success-disabled: #00603580; --oz-color-content-warning: #6B4600; --oz-color-content-warning-hover: #4F3300; --oz-color-content-warning-active: #362200; --oz-color-content-warning-disabled: #6B460080; --oz-color-content-critical: #9D183E; --oz-color-content-critical-hover: #75112D; --oz-color-content-critical-active: #520C1E; --oz-color-content-critical-disabled: #9D183E80; --oz-color-content-info: #1049A4; --oz-color-content-info-hover: #09367C; --oz-color-content-info-active: #062457; --oz-color-content-info-disabled: #1049A480; --oz-color-content-brand-inverse: #F97A45; --oz-color-content-success-inverse: #4DA972; --oz-color-content-warning-inverse: #BF8B39; --oz-color-content-critical-inverse: #F5617D; --oz-color-content-info-inverse: #5292FD; --oz-color-content-on-brand: #FFFFFF; --oz-color-content-on-success: #FFFFFF; --oz-color-content-on-warning: #FFFFFF; --oz-color-content-on-critical: #FFFFFF; --oz-color-content-on-info: #FFFFFF; --oz-color-content-on-inverse: #F4F5EF; --oz-color-content-on-brand-disabled: #7A7C72; --oz-color-content-on-success-disabled: #7A7C72; --oz-color-content-on-warning-disabled: #7A7C72; --oz-color-content-on-critical-disabled: #7A7C72; --oz-color-content-on-info-disabled: #7A7C72; --oz-color-chart-1: #F54E00; --oz-color-chart-2: #005C94; --oz-color-chart-3: #007F7F; --oz-color-chart-4: #483376; --oz-color-chart-5: #A97F00; --oz-color-sidebar-background: #E5E7E0; --oz-color-sidebar-border: #DBDDD3; --oz-color-sidebar-item-hover: #E5E7E0; --oz-color-sidebar-item-active: #CFD1C7; --oz-color-sidebar-item-selected: #F97A4526; --oz-color-sidebar-content: #1B1C18; --oz-color-sidebar-content-muted: #4A4C43; --oz-color-sidebar-content-selected: #B03A00; --oz-color-gradient-mesh-1: #FF8A6F; --oz-color-gradient-mesh-2: #D1C4FD; --oz-color-gradient-mesh-3: #FFD8CE; --oz-color-gradient-mesh-4: #FFB3A0; --oz-color-gradient-mesh-base: #FDFDF8; --oz-color-gradient-onboarding-1: #F54E00; --oz-color-gradient-onboarding-2: #C85993; --oz-color-gradient-onboarding-3: #8E6FD8; --oz-color-gradient-halo: #F54E004D; --oz-overlay-dimness: #1B1C1866; --oz-overlay-blur: 4px; --oz-shadow-x-small: #A7A99E14; --oz-shadow-small: #A7A99E1F; --oz-shadow-medium: #A7A99E29; --oz-shadow-large: #A7A99E33; /* ready-to-use box-shadow composites */ --oz-elevation-x-small: 0 1px 2px 0 #A7A99E14; --oz-elevation-small: 0 1px 3px 0 #A7A99E1F, 0 1px 2px -1px #A7A99E1F; --oz-elevation-medium: 0 4px 6px -1px #A7A99E29, 0 2px 4px -2px #A7A99E29; --oz-elevation-large: 0 10px 15px -3px #A7A99E33, 0 4px 6px -4px #A7A99E33; } /* color-scheme is what tells the browser to render its OWN chrome dark: scrollbars, pickers, form control defaults, spellcheck underlines, the canvas behind an overscroll. The .light block declared it and this one did not, so a dark-themed app kept light scrollbars and a blinding white date picker. */ .dark, [data-theme='dark'] { color-scheme: dark; --oz-color-background: #191B21; --oz-color-surface-primary: #1E2027; --oz-color-surface-primary-variant: #232630; --oz-color-surface-secondary: #232630; --oz-color-surface-secondary-variant: #1E2027; --oz-color-surface-tertiary: #2C2F39; --oz-color-surface-tertiary-variant: #232630; --oz-color-surface-elevated: #262932; --oz-color-surface-overlay: #262932; --oz-color-surface-inverse: #F6F7FA; --oz-color-surface-fixed: #FFFFFF; --oz-color-surface-brand: #F9BD2B26; --oz-color-surface-success: #1D915626; --oz-color-surface-warning: #A36E0726; --oz-color-surface-critical: #E63C6526; --oz-color-surface-info: #2C74EA26; --oz-color-surface-brand-flat: #6F4E05; --oz-color-surface-success-flat: #013118; --oz-color-surface-warning-flat: #362200; --oz-color-surface-critical-flat: #520C1E; --oz-color-surface-info-flat: #062457; --oz-color-fill-primary: #1E2027; --oz-color-fill-primary-hover: #232630; --oz-color-fill-primary-active: #2C2F39; --oz-color-fill-primary-disabled: #21243080; --oz-color-fill-primary-variant: #232630; --oz-color-fill-primary-variant-hover: #212430; --oz-color-fill-primary-variant-active: #262932; --oz-color-fill-primary-variant-disabled: #1E202780; --oz-color-fill-secondary: #232630; --oz-color-fill-secondary-hover: #2C2F39; --oz-color-fill-secondary-active: #33363F; --oz-color-fill-secondary-disabled: #26293280; --oz-color-fill-secondary-variant: #212430; --oz-color-fill-secondary-variant-hover: #262932; --oz-color-fill-secondary-variant-active: #33363F; --oz-color-fill-secondary-variant-disabled: #21243080; --oz-color-fill-tertiary: #33363F; --oz-color-fill-tertiary-hover: #474B58; --oz-color-fill-tertiary-active: #626674; --oz-color-fill-tertiary-disabled: #33363F80; --oz-color-fill-tertiary-variant: #262932; --oz-color-fill-tertiary-variant-hover: #33363F; --oz-color-fill-tertiary-variant-active: #474B58; --oz-color-fill-tertiary-variant-disabled: #26293280; --oz-color-fill-elevated: #262932; --oz-color-fill-elevated-hover: #2C2F39; --oz-color-fill-elevated-active: #33363F; --oz-color-fill-elevated-disabled: #26293280; --oz-color-fill-inverse: #F6F7FA; --oz-color-fill-inverse-hover: #EDEEF4; --oz-color-fill-inverse-active: #E2E4EC; --oz-color-fill-inverse-disabled: #F6F7FA80; --oz-color-fill-brand: #F9BD2B; --oz-color-fill-brand-hover: #F9BD2B; --oz-color-fill-brand-active: #F1A82C; --oz-color-fill-brand-disabled: #2C2F39; /* Button chrome. PostHog's primary control is a face sitting on a hard 3px plate - no blur, no gradient - so it reads as a physical edge that presses when clicked. It needs four values of its own because the face is deliberately NOT the brand colour: brand red on a warm ground is a shout, and the amber face with near-black text is what makes the control loud enough to find and quiet enough to live with. */ --oz-color-chrome-face: #F9BD2B; --oz-color-chrome-edge: #835C19; --oz-color-chrome-shadow: #99660E; --oz-color-chrome-ink: #1B1C18; --oz-color-fill-success: #1D9156; --oz-color-fill-success-hover: #389D64; --oz-color-fill-success-active: #4DA972; --oz-color-fill-success-disabled: #2C2F39; --oz-color-fill-warning: #A36E07; --oz-color-fill-warning-hover: #B17C25; --oz-color-fill-warning-active: #BF8B39; --oz-color-fill-warning-disabled: #2C2F39; --oz-color-fill-critical: #E63C65; --oz-color-fill-critical-hover: #EE5071; --oz-color-fill-critical-active: #F5617D; --oz-color-fill-critical-disabled: #2C2F39; --oz-color-fill-info: #2C74EA; --oz-color-fill-info-hover: #4083F4; --oz-color-fill-info-active: #5292FD; --oz-color-fill-info-disabled: #2C2F39; --oz-color-fill-brand-secondary: #F9BD2B26; --oz-color-fill-brand-secondary-hover: #F9BD2B4D; --oz-color-fill-brand-secondary-active: #F1A82C4D; --oz-color-fill-brand-secondary-disabled: #F9BD2B14; --oz-color-fill-success-secondary: #1D915626; --oz-color-fill-success-secondary-hover: #1D91564D; --oz-color-fill-success-secondary-active: #4DA9724D; --oz-color-fill-success-secondary-disabled: #1D915614; --oz-color-fill-warning-secondary: #A36E0726; --oz-color-fill-warning-secondary-hover: #A36E074D; --oz-color-fill-warning-secondary-active: #BF8B394D; --oz-color-fill-warning-secondary-disabled: #A36E0714; --oz-color-fill-critical-secondary: #E63C6526; --oz-color-fill-critical-secondary-hover: #E63C654D; --oz-color-fill-critical-secondary-active: #F5617D4D; --oz-color-fill-critical-secondary-disabled: #E63C6514; --oz-color-fill-info-secondary: #2C74EA26; --oz-color-fill-info-secondary-hover: #2C74EA4D; --oz-color-fill-info-secondary-active: #5292FD4D; --oz-color-fill-info-secondary-disabled: #2C74EA14; --oz-color-fill-selected: #F9BD2B26; --oz-color-fill-selected-hover: #F9BD2B4D; --oz-color-fill-selected-active: #F1A82C4D; --oz-color-fill-selected-disabled: #F9BD2B14; --oz-color-fill-fixed: #FFFFFF; --oz-color-fill-fixed-disabled: #FFFFFF80; --oz-color-border-primary: #3E424F; --oz-color-border-primary-hover: #4A4E5C; --oz-color-border-primary-disabled: #4F546280; --oz-color-border-secondary: #4A4E5C; --oz-color-border-secondary-hover: #626674; --oz-color-border-secondary-disabled: #62667480; --oz-color-border-tertiary: #7E8291; --oz-color-border-tertiary-hover: #969AA8; --oz-color-border-tertiary-disabled: #7E829180; --oz-color-border-elevated: #474B58; --oz-color-border-elevated-hover: #626674; --oz-color-border-elevated-disabled: #474B5880; --oz-color-border-inverse: #F6F7FA; --oz-color-border-inverse-hover: #EDEEF4; --oz-color-border-inverse-disabled: #F6F7FA80; --oz-color-border-brand: #F9BD2B; --oz-color-border-brand-hover: #F1A82C; --oz-color-border-brand-disabled: #F9BD2B80; --oz-color-border-success: #1D9156; --oz-color-border-success-hover: #4DA972; --oz-color-border-success-disabled: #1D915680; --oz-color-border-warning: #A36E07; --oz-color-border-warning-hover: #BF8B39; --oz-color-border-warning-disabled: #A36E0780; --oz-color-border-critical: #E63C65; --oz-color-border-critical-hover: #F5617D; --oz-color-border-critical-disabled: #E63C6580; --oz-color-border-info: #2C74EA; --oz-color-border-info-hover: #5292FD; --oz-color-border-info-disabled: #2C74EA80; --oz-color-border-focus: #F5C255; --oz-color-border-focus-inverse: #191B21; --oz-color-border-brand-secondary: #F9BD2B4D; --oz-color-border-selected: #F1A82C; --oz-color-content-primary: #EDEEF4; --oz-color-content-secondary: #C7CBD6; --oz-color-content-tertiary: #AEB3C2; --oz-color-content-placeholder: #AEB3C2; --oz-color-content-primary-disabled: #EDEEF480; --oz-color-content-secondary-disabled: #C7CBD680; --oz-color-content-tertiary-disabled: #AEB3C280; --oz-color-content-link: #F1A82C; --oz-color-content-link-hover: #FBD37A; --oz-color-content-link-visited: #A58CE9; --oz-color-content-selected: #F1A82C; --oz-color-content-inverse-primary: #191B21; --oz-color-content-inverse-secondary: #33363F; --oz-color-content-inverse-primary-disabled: #191B2180; --oz-color-content-inverse-secondary-disabled: #33363F80; --oz-color-content-fixed-primary: #191B21; --oz-color-content-fixed-inverse: #FFFFFF; --oz-color-content-fixed-primary-disabled: #191B2180; --oz-color-content-fixed-inverse-disabled: #FFFFFF80; --oz-color-content-brand: #F1A82C; --oz-color-content-brand-hover: #FBD37A; --oz-color-content-brand-active: #FFB3A0; --oz-color-content-brand-disabled: #F1A82C80; --oz-color-content-success: #4DA972; --oz-color-content-success-hover: #7AC394; --oz-color-content-success-active: #A5D8B6; --oz-color-content-success-disabled: #4DA97280; --oz-color-content-warning: #BF8B39; --oz-color-content-warning-hover: #D9A75E; --oz-color-content-warning-active: #EFC489; --oz-color-content-warning-disabled: #BF8B3980; --oz-color-content-critical: #F5617D; --oz-color-content-critical-hover: #FE8597; --oz-color-content-critical-active: #FFB0B9; --oz-color-content-critical-disabled: #F5617D80; --oz-color-content-info: #5292FD; --oz-color-content-info-hover: #7DAEFF; --oz-color-content-info-active: #A8C9FF; --oz-color-content-info-disabled: #5292FD80; --oz-color-content-brand-inverse: #C08A12; --oz-color-content-success-inverse: #006035; --oz-color-content-warning-inverse: #6B4600; --oz-color-content-critical-inverse: #9D183E; --oz-color-content-info-inverse: #1049A4; --oz-color-content-on-brand: #1B1C18; --oz-color-content-on-success: #FFFFFF; --oz-color-content-on-warning: #FFFFFF; --oz-color-content-on-critical: #FFFFFF; --oz-color-content-on-info: #FFFFFF; --oz-color-content-on-inverse: #191B21; --oz-color-content-on-brand-disabled: #4A4C43; --oz-color-content-on-success-disabled: #969AA8; --oz-color-content-on-warning-disabled: #969AA8; --oz-color-content-on-critical-disabled: #969AA8; --oz-color-content-on-info-disabled: #969AA8; --oz-color-chart-1: #F1A82C; --oz-color-chart-2: #048CDC; --oz-color-chart-3: #4FCDCD; --oz-color-chart-4: #7758BB; --oz-color-chart-5: #E6CA92; --oz-color-sidebar-background: #1E2027; --oz-color-sidebar-border: #3E424F; --oz-color-sidebar-item-hover: #262932; --oz-color-sidebar-item-active: #2C2F39; --oz-color-sidebar-item-selected: #F9BD2B26; --oz-color-sidebar-content: #EDEEF4; --oz-color-sidebar-content-muted: #C7CBD6; --oz-color-sidebar-content-selected: #F1A82C; --oz-color-gradient-mesh-1: #E0A81F; --oz-color-gradient-mesh-2: #7758BB; --oz-color-gradient-mesh-3: #9A6E0A; --oz-color-gradient-mesh-4: #F9BD2B; --oz-color-gradient-mesh-base: #212430; --oz-color-gradient-onboarding-1: #C08A12; --oz-color-gradient-onboarding-2: #8B3262; --oz-color-gradient-onboarding-3: #5F4599; --oz-color-gradient-halo: #F1A82C4D; --oz-overlay-dimness: #00000099; --oz-overlay-blur: 4px; --oz-shadow-x-small: #00000073; --oz-shadow-small: #00000099; --oz-shadow-medium: #000000BF; --oz-shadow-large: #000000E6; /* ready-to-use box-shadow composites */ --oz-elevation-x-small: 0 1px 2px 0 #00000073; --oz-elevation-small: 0 1px 3px 0 #00000099, 0 1px 2px -1px #00000099; --oz-elevation-medium: 0 4px 6px -1px #000000BF, 0 2px 4px -2px #000000BF; --oz-elevation-large: 0 10px 15px -3px #000000E6, 0 4px 6px -4px #000000E6; } /* Scoped light island inside a dark app. Replaces .force-light, which was a hand-maintained third copy of the theme and had already drifted. */ .light, [data-theme='light'] { color-scheme: light; --oz-color-background: #EEEFE9; --oz-color-surface-primary: #E5E7E0; --oz-color-surface-primary-variant: #FDFDF8; --oz-color-surface-secondary: #EAEBE3; --oz-color-surface-secondary-variant: #F4F5EF; --oz-color-surface-tertiary: #D4D6CB; --oz-color-surface-tertiary-variant: #EAEBE3; --oz-color-surface-elevated: #FDFDF8; --oz-color-surface-overlay: #FDFDF8; --oz-color-surface-inverse: #1B1C18; --oz-color-surface-fixed: #FFFFFF; --oz-color-surface-brand: #FBEADF; --oz-color-surface-success: #E7F5EB; --oz-color-surface-warning: #FDF0DE; --oz-color-surface-critical: #FFEAEC; --oz-color-surface-info: #E7F0FF; --oz-color-surface-brand-flat: #FBEADF; --oz-color-surface-success-flat: #E7F5EB; --oz-color-surface-warning-flat: #FDF0DE; --oz-color-surface-critical-flat: #FFEAEC; --oz-color-surface-info-flat: #E7F0FF; --oz-color-fill-primary: #F4F5EF; --oz-color-fill-primary-hover: #EAEBE3; --oz-color-fill-primary-active: #DBDDD3; --oz-color-fill-primary-disabled: #F4F5EF80; --oz-color-fill-primary-variant: #FDFDF8; --oz-color-fill-primary-variant-hover: #F4F5EF; --oz-color-fill-primary-variant-active: #EAEBE3; --oz-color-fill-primary-variant-disabled: #FFFFFF80; --oz-color-fill-secondary: #EAEBE3; --oz-color-fill-secondary-hover: #DBDDD3; --oz-color-fill-secondary-active: #CFD1C7; --oz-color-fill-secondary-disabled: #EAEBE380; --oz-color-fill-secondary-variant: #F4F5EF; --oz-color-fill-secondary-variant-hover: #EAEBE3; --oz-color-fill-secondary-variant-active: #DBDDD3; --oz-color-fill-secondary-variant-disabled: #F4F5EF80; --oz-color-fill-tertiary: #DBDDD3; --oz-color-fill-tertiary-hover: #CFD1C7; --oz-color-fill-tertiary-active: #BFC1B7; --oz-color-fill-tertiary-disabled: #DBDDD380; --oz-color-fill-tertiary-variant: #EAEBE3; --oz-color-fill-tertiary-variant-hover: #DBDDD3; --oz-color-fill-tertiary-variant-active: #CFD1C7; --oz-color-fill-tertiary-variant-disabled: #EAEBE380; --oz-color-fill-elevated: #FDFDF8; --oz-color-fill-elevated-hover: #F4F5EF; --oz-color-fill-elevated-active: #EAEBE3; --oz-color-fill-elevated-disabled: #FFFFFF80; --oz-color-fill-inverse: #1B1C18; --oz-color-fill-inverse-hover: #23241C; --oz-color-fill-inverse-active: #2B2C24; --oz-color-fill-inverse-disabled: #1B1C1880; --oz-color-fill-brand: #F54E00; --oz-color-fill-brand-hover: #D84400; --oz-color-fill-brand-active: #B03A00; --oz-color-fill-brand-disabled: #E5E7E0; /* Button chrome. PostHog's primary control is a face sitting on a hard 3px plate - no blur, no gradient - so it reads as a physical edge that presses when clicked. It needs four values of its own because the face is deliberately NOT the brand colour: brand red on a warm ground is a shout, and the amber face with near-black text is what makes the control loud enough to find and quiet enough to live with. */ --oz-color-chrome-face: #EB9D2A; --oz-color-chrome-edge: #B17816; --oz-color-chrome-shadow: #CD8407; --oz-color-chrome-ink: #1B1C18; --oz-color-fill-success: #1D9156; --oz-color-fill-success-hover: #037944; --oz-color-fill-success-active: #006035; --oz-color-fill-success-disabled: #E5E7E0; --oz-color-fill-warning: #A36E07; --oz-color-fill-warning-hover: #865900; --oz-color-fill-warning-active: #6B4600; --oz-color-fill-warning-disabled: #E5E7E0; --oz-color-fill-critical: #E63C65; --oz-color-fill-critical-hover: #C52450; --oz-color-fill-critical-active: #9D183E; --oz-color-fill-critical-disabled: #E5E7E0; --oz-color-fill-info: #2C74EA; --oz-color-fill-info-hover: #195DCA; --oz-color-fill-info-active: #1049A4; --oz-color-fill-info-disabled: #E5E7E0; --oz-color-fill-brand-secondary: #F97A4526; --oz-color-fill-brand-secondary-hover: #F97A454D; --oz-color-fill-brand-secondary-active: #F54E004D; --oz-color-fill-brand-secondary-disabled: #F97A4514; --oz-color-fill-success-secondary: #4DA97226; --oz-color-fill-success-secondary-hover: #4DA9724D; --oz-color-fill-success-secondary-active: #1D91564D; --oz-color-fill-success-secondary-disabled: #4DA97214; --oz-color-fill-warning-secondary: #BF8B3926; --oz-color-fill-warning-secondary-hover: #BF8B394D; --oz-color-fill-warning-secondary-active: #A36E074D; --oz-color-fill-warning-secondary-disabled: #BF8B3914; --oz-color-fill-critical-secondary: #F5617D26; --oz-color-fill-critical-secondary-hover: #F5617D4D; --oz-color-fill-critical-secondary-active: #E63C654D; --oz-color-fill-critical-secondary-disabled: #F5617D14; --oz-color-fill-info-secondary: #5292FD26; --oz-color-fill-info-secondary-hover: #5292FD4D; --oz-color-fill-info-secondary-active: #2C74EA4D; --oz-color-fill-info-secondary-disabled: #5292FD14; --oz-color-fill-selected: #F97A4526; --oz-color-fill-selected-hover: #F97A454D; --oz-color-fill-selected-active: #F54E004D; --oz-color-fill-selected-disabled: #F97A4514; --oz-color-fill-fixed: #FFFFFF; --oz-color-fill-fixed-disabled: #FFFFFF80; --oz-color-border-primary: #DBDDD3; --oz-color-border-primary-hover: #CFD1C7; --oz-color-border-primary-disabled: #DBDDD380; --oz-color-border-secondary: #C5C7BC; --oz-color-border-secondary-hover: #BFC1B7; --oz-color-border-secondary-disabled: #C5C7BC80; --oz-color-border-tertiary: #BFC1B7; --oz-color-border-tertiary-hover: #A7A99E; --oz-color-border-tertiary-disabled: #BFC1B780; --oz-color-border-elevated: #DBDDD3; --oz-color-border-elevated-hover: #CFD1C7; --oz-color-border-elevated-disabled: #DBDDD380; --oz-color-border-inverse: #1B1C18; --oz-color-border-inverse-hover: #23241C; --oz-color-border-inverse-disabled: #1B1C1880; --oz-color-border-brand: #F54E00; --oz-color-border-brand-hover: #D84400; --oz-color-border-brand-disabled: #F54E0080; --oz-color-border-success: #1D9156; --oz-color-border-success-hover: #037944; --oz-color-border-success-disabled: #1D915680; --oz-color-border-warning: #A36E07; --oz-color-border-warning-hover: #865900; --oz-color-border-warning-disabled: #A36E0780; --oz-color-border-critical: #E63C65; --oz-color-border-critical-hover: #C52450; --oz-color-border-critical-disabled: #E63C6580; --oz-color-border-info: #2C74EA; --oz-color-border-info-hover: #195DCA; --oz-color-border-info-disabled: #2C74EA80; --oz-color-border-focus: #B03A00; --oz-color-border-focus-inverse: #FFFFFF; --oz-color-border-brand-secondary: #F97A454D; --oz-color-border-selected: #D84400; --oz-color-content-primary: #1B1C18; --oz-color-content-secondary: #4A4C43; --oz-color-content-tertiary: #6B6D63; --oz-color-content-placeholder: #6B6D63; --oz-color-content-primary-disabled: #1B1C1880; --oz-color-content-secondary-disabled: #4A4C4380; --oz-color-content-tertiary-disabled: #6B6D6380; --oz-color-content-link: #B03A00; --oz-color-content-link-hover: #8E2F00; --oz-color-content-link-visited: #5F4599; --oz-color-content-selected: #B03A00; --oz-color-content-inverse-primary: #EAEBE3; --oz-color-content-inverse-secondary: #BFC1B7; --oz-color-content-inverse-primary-disabled: #EAEBE380; --oz-color-content-inverse-secondary-disabled: #BFC1B780; --oz-color-content-fixed-primary: #1B1C18; --oz-color-content-fixed-inverse: #FFFFFF; --oz-color-content-fixed-primary-disabled: #1B1C1880; --oz-color-content-fixed-inverse-disabled: #FFFFFF80; --oz-color-content-brand: #B03A00; --oz-color-content-brand-hover: #8E2F00; --oz-color-content-brand-active: #6B2400; --oz-color-content-brand-disabled: #B03A0080; --oz-color-content-success: #006035; --oz-color-content-success-hover: #004725; --oz-color-content-success-active: #013118; --oz-color-content-success-disabled: #00603580; --oz-color-content-warning: #6B4600; --oz-color-content-warning-hover: #4F3300; --oz-color-content-warning-active: #362200; --oz-color-content-warning-disabled: #6B460080; --oz-color-content-critical: #9D183E; --oz-color-content-critical-hover: #75112D; --oz-color-content-critical-active: #520C1E; --oz-color-content-critical-disabled: #9D183E80; --oz-color-content-info: #1049A4; --oz-color-content-info-hover: #09367C; --oz-color-content-info-active: #062457; --oz-color-content-info-disabled: #1049A480; --oz-color-content-brand-inverse: #F97A45; --oz-color-content-success-inverse: #4DA972; --oz-color-content-warning-inverse: #BF8B39; --oz-color-content-critical-inverse: #F5617D; --oz-color-content-info-inverse: #5292FD; --oz-color-content-on-brand: #FFFFFF; --oz-color-content-on-success: #FFFFFF; --oz-color-content-on-warning: #FFFFFF; --oz-color-content-on-critical: #FFFFFF; --oz-color-content-on-info: #FFFFFF; --oz-color-content-on-inverse: #F4F5EF; --oz-color-content-on-brand-disabled: #7A7C72; --oz-color-content-on-success-disabled: #7A7C72; --oz-color-content-on-warning-disabled: #7A7C72; --oz-color-content-on-critical-disabled: #7A7C72; --oz-color-content-on-info-disabled: #7A7C72; --oz-color-chart-1: #F54E00; --oz-color-chart-2: #005C94; --oz-color-chart-3: #007F7F; --oz-color-chart-4: #483376; --oz-color-chart-5: #A97F00; --oz-color-sidebar-background: #E5E7E0; --oz-color-sidebar-border: #DBDDD3; --oz-color-sidebar-item-hover: #E5E7E0; --oz-color-sidebar-item-active: #CFD1C7; --oz-color-sidebar-item-selected: #F97A4526; --oz-color-sidebar-content: #1B1C18; --oz-color-sidebar-content-muted: #4A4C43; --oz-color-sidebar-content-selected: #B03A00; --oz-color-gradient-mesh-1: #FF8A6F; --oz-color-gradient-mesh-2: #D1C4FD; --oz-color-gradient-mesh-3: #FFD8CE; --oz-color-gradient-mesh-4: #FFB3A0; --oz-color-gradient-mesh-base: #FDFDF8; --oz-color-gradient-onboarding-1: #F54E00; --oz-color-gradient-onboarding-2: #C85993; --oz-color-gradient-onboarding-3: #8E6FD8; --oz-color-gradient-halo: #F54E004D; --oz-overlay-dimness: #1B1C1866; --oz-overlay-blur: 4px; --oz-shadow-x-small: #A7A99E14; --oz-shadow-small: #A7A99E1F; --oz-shadow-medium: #A7A99E29; --oz-shadow-large: #A7A99E33; /* ready-to-use box-shadow composites */ --oz-elevation-x-small: 0 1px 2px 0 #A7A99E14; --oz-elevation-small: 0 1px 3px 0 #A7A99E1F, 0 1px 2px -1px #A7A99E1F; --oz-elevation-medium: 0 4px 6px -1px #A7A99E29, 0 2px 4px -2px #A7A99E29; --oz-elevation-large: 0 10px 15px -3px #A7A99E33, 0 4px 6px -4px #A7A99E33; } /* Someone asked their operating system for less movement. Honour it here, in the layer that defines the movement — not in whichever app happens to remember. See reducedMotionBlock() in build/build.mjs for why this is not `animation: none`. INSIDE `@layer base`, and after the mode blocks, and both halves of that are load-bearing. This block shipped after the closing brace instead, on the reasoning that unlayered CSS outranks layered CSS — which is true of real cascade layers and false here. Tailwind treats `@layer base` as its own directive rather than as CSS: it hoists the contents to wherever `@tailwind base` sits and emits no `@layer` at-rule at all. So in the compiled sheet there were no layers to reason about, this block sat at byte 95, the `:root` that sets the multiplier to 1 sat at byte 8849, the two had identical specificity — and later won. The effect was total: the multiplier measured 1 with the preference on, so every `.oz-enter-*` kept its full travel, every press-scale kept its squash, and the spring remap never applied either, so spatial curves kept their overshoot. Nothing was visibly broken, which is why it survived — the only symptom was that a preference did nothing. Now the relative order is authored order within one layer, which Tailwind preserves. Do not move it back out. `verify-classes.mjs` measures the byte offsets in the compiled stylesheet, because this is a property of the output and no assertion about the input can see it. */ @media (prefers-reduced-motion: reduce) { /* The island selectors are not redundant with `:root`. A scoped `.dark` island re-declares every value including the multiplier, and for an inherited custom property the nearer element wins outright — specificity never enters into it — so an island would silently re-enable motion inside itself. */ :root, .dark, [data-theme='dark'], .light, [data-theme='light'] { /* 1. All spatial travel collapses; fades are untouched. */ --oz-motion-spatial-scale: 0; /* 2. Spatial springs lose their overshoot, keeping their speed. */ --oz-spring-spatial-fast: var(--oz-spring-effects-fast); --oz-spring-spatial-default: var(--oz-spring-effects-default); --oz-spring-spatial-slow: var(--oz-spring-effects-slow); --oz-spring-expressive: var(--oz-spring-effects-slow); } /* 3. Ambient loops stop. `.oz-ambient` is the opt-in marker for a decorative loop; the attribute selector catches anything driving one from the token directly. Not a universal selector — a functional transition is not the thing being objected to. `!important` is what carries this past the `.oz-ambient` in @layer utilities, which is emitted after this one. */ .oz-ambient, [style*='--oz-duration-ambient'] { animation: none !important; } /* 4. Programmatic smooth scroll is large-viewport travel. */ html { scroll-behavior: auto !important; } } } /* Type steps. Weight is deliberately NOT baked in — every step accepts every weight via --oz-weight-* or Tailwind's font-* utilities. */ @layer utilities { .oz-text-display-lg { font-family: var(--oz-font-display); font-size: var(--oz-text-display-lg); line-height: var(--oz-leading-display-lg); letter-spacing: var(--oz-tracking-display-lg); } .oz-text-display-md { font-family: var(--oz-font-display); font-size: var(--oz-text-display-md); line-height: var(--oz-leading-display-md); letter-spacing: var(--oz-tracking-display-md); } .oz-text-display-sm { font-family: var(--oz-font-display); font-size: var(--oz-text-display-sm); line-height: var(--oz-leading-display-sm); letter-spacing: var(--oz-tracking-display-sm); } .oz-text-heading-xl { font-family: var(--oz-font-heading); font-size: var(--oz-text-heading-xl); line-height: var(--oz-leading-heading-xl); letter-spacing: var(--oz-tracking-heading-xl); } .oz-text-heading-lg { font-family: var(--oz-font-heading); font-size: var(--oz-text-heading-lg); line-height: var(--oz-leading-heading-lg); letter-spacing: var(--oz-tracking-heading-lg); } .oz-text-heading-md { font-family: var(--oz-font-heading); font-size: var(--oz-text-heading-md); line-height: var(--oz-leading-heading-md); letter-spacing: var(--oz-tracking-heading-md); } .oz-text-heading-sm { font-family: var(--oz-font-heading); font-size: var(--oz-text-heading-sm); line-height: var(--oz-leading-heading-sm); letter-spacing: var(--oz-tracking-heading-sm); } .oz-text-heading-xs { font-family: var(--oz-font-heading); font-size: var(--oz-text-heading-xs); line-height: var(--oz-leading-heading-xs); letter-spacing: var(--oz-tracking-heading-xs); } .oz-text-body-lg { font-family: var(--oz-font-body); font-size: var(--oz-text-body-lg); line-height: var(--oz-leading-body-lg); letter-spacing: var(--oz-tracking-body-lg); } .oz-text-body-md { font-family: var(--oz-font-body); font-size: var(--oz-text-body-md); line-height: var(--oz-leading-body-md); letter-spacing: var(--oz-tracking-body-md); } .oz-text-body-sm { font-family: var(--oz-font-body); font-size: var(--oz-text-body-sm); line-height: var(--oz-leading-body-sm); letter-spacing: var(--oz-tracking-body-sm); } .oz-text-body-xs { font-family: var(--oz-font-body); font-size: var(--oz-text-body-xs); line-height: var(--oz-leading-body-xs); letter-spacing: var(--oz-tracking-body-xs); } .oz-text-label-md { font-family: var(--oz-font-label); font-size: var(--oz-text-label-md); line-height: var(--oz-leading-label-md); letter-spacing: var(--oz-tracking-label-md); } .oz-text-label-sm { font-family: var(--oz-font-label); font-size: var(--oz-text-label-sm); line-height: var(--oz-leading-label-sm); letter-spacing: var(--oz-tracking-label-sm); } .oz-text-label-xs { font-family: var(--oz-font-label); font-size: var(--oz-text-label-xs); line-height: var(--oz-leading-label-xs); letter-spacing: var(--oz-tracking-label-xs); } /* Every visual property, and nothing that triggers layout. */ .oz-transition-visual { transition-property: color, background-color, border-color, outline-color, fill, stroke, opacity, box-shadow, transform, filter; } /* Depth alone, for a surface that lifts without changing colour. */ .oz-transition-depth { transition-property: box-shadow, transform; } @keyframes oz-enter-fade { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } } @keyframes oz-enter-rise { from { opacity: 0; transform: translateY(calc(6px * var(--oz-motion-spatial-scale))); } to { opacity: 1; transform: none; } } @keyframes oz-enter-pop { from { opacity: 0; transform: scale(calc(1 - 0.04 * var(--oz-motion-spatial-scale))); } to { opacity: 1; transform: none; } } @keyframes oz-enter-hero { from { opacity: 0; transform: translateY(calc(10px * var(--oz-motion-spatial-scale))) scale(calc(1 - 0.02 * var(--oz-motion-spatial-scale))); } to { opacity: 1; transform: none; } } @keyframes oz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Opacity only. The safe default, and the only one that is identical under reduced motion. */ .oz-enter-fade { animation: oz-enter-fade var(--oz-spring-effects-default-ms) var(--oz-spring-effects-default) both; } /* Content arriving in place: a row, a card, a result. */ .oz-enter-rise { animation: oz-enter-rise var(--oz-spring-spatial-default-ms) var(--oz-spring-spatial-default) both; } /* Something that appeared because you acted: a popover, a menu, a toast. */ .oz-enter-pop { animation: oz-enter-pop var(--oz-spring-spatial-fast-ms) var(--oz-spring-spatial-fast) both; } /* One per screen. The moment worth noticing. */ .oz-enter-hero { animation: oz-enter-hero var(--oz-spring-expressive-ms) var(--oz-spring-expressive) both; } /* The one loop in the system. Not a spring — a pulse has no target to settle toward, so it keeps the ambient duration and a symmetric curve. Carries the .oz-ambient marker that the reduced-motion block switches off, because an endless decorative loop is the clearest case of what that preference is asking about. */ .oz-ambient { animation: oz-pulse var(--oz-duration-ambient) var(--oz-ease-standard) infinite; } /* Stops the page behind an overlay from scrolling. Toggle it on the root element; see useScrollLock in the showcase for the reference consumer. No padding compensation here, and that is the point — :root reserves the scrollbar gutter permanently, so taking the scrollbar away costs no width and nothing moves. */ .oz-scroll-lock { overflow: hidden; /* And the gutter has to be painted, because an overlay's scrim cannot reach it. position: fixed resolves against the initial containing block, which excludes reserved gutters, so `inset: 0` stops short of the window edge by exactly the scrollbar's width. Left alone that strip keeps the page background — measured here as an undimmed 15px band down the right of a dimmed page, which is a smaller version of the artefact the gutter was reserved to remove. Two background layers rather than one translucent colour: a semi-transparent background on the root composites against the browser's default canvas, not against the page, so it would come out grey in dark mode. A gradient of one colour is the standard way to get a paint layer that composites over background-color, and the pair reproduces exactly what the scrim is — dimness over the page. This also takes over from background propagation. With no background of its own the root propagates 's to the canvas; declaring one here stops that for as long as the lock is held, which is correct — body still paints its own box, so only the gutter changes. */ background-color: var(--oz-color-background); background-image: linear-gradient( var(--oz-overlay-dimness), var(--oz-overlay-dimness) ); } /* Safari below 18.2 has no scrollbar-gutter, so the gutter cannot be reserved and the width has to be given back by hand. --oz-scrollbar-width is measured by the locking code BEFORE the class lands, because measuring afterwards reads the scrollbar that has already gone. It falls back to 0px, so a browser with support and a browser with overlay scrollbars both pay exactly nothing. Scoped in @supports rather than applied unconditionally because the two fixes are not additive: reserving the gutter AND padding for it would move the page 15px the other way. */ @supports not (scrollbar-gutter: stable) { .oz-scroll-lock { padding-right: var(--oz-scrollbar-width, 0px); } } }