@layer discern.reset, discern.tokens, discern.theme, discern.foundation, discern.components, discern.utilities; @property --discern-darkness{syntax:"";inherits:true;initial-value:0;}@property --discern-structure{syntax:"";inherits:true;initial-value:1;}@property --discern-emphasis{syntax:"";inherits:true;initial-value:1;}@property --discern-density{syntax:"";inherits:true;initial-value:1;}@property --discern-paper-tint{syntax:"";inherits:true;initial-value:0;}@property --discern-paper-tint-hue{syntax:"";inherits:true;initial-value:0;}@property --discern-ink-tint{syntax:"";inherits:true;initial-value:0;}@property --discern-ink-tint-hue{syntax:"";inherits:true;initial-value:0;}@property --discern-accent-hue{syntax:"";inherits:true;initial-value:255;}@layer discern.tokens{:where([data-discern-root]){color-scheme:light dark;--discern-darkness:0;--discern-structure:1;--discern-emphasis:1;--discern-density:1;--discern-paper-tint:0;--discern-paper-tint-hue:0;--discern-ink-tint:0;--discern-ink-tint-hue:0;--discern-font-display:"Iowan Old Style","Palatino Linotype",Georgia,ui-serif,serif;--discern-font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--discern-font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;--discern-font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--discern-font-marketing:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--discern-font-weight-marketing:600;--discern-font-size-xs:0.85rem;--discern-font-size-sm:0.95rem;--discern-font-size-md:1.05rem;--discern-font-size-lg:1.125rem;--discern-font-size-card-title:var(--discern-font-size-lg);--discern-font-size-display-sm:1.5rem;--discern-font-size-display-md:2rem;--discern-font-size-display-lg:2.75rem;--discern-font-size-display-xl:clamp(2.75rem,5.4vw,4.125rem);--discern-font-weight-body:400;--discern-font-weight-strong:650;--discern-font-weight-display:700;--discern-leading-tight:1.08;--discern-leading-snug:1.3;--discern-leading-body:1.58;--discern-space-1:4px;--discern-space-2:8px;--discern-space-3:12px;--discern-space-4:16px;--discern-space-5:20px;--discern-space-6:24px;--discern-space-8:32px;--discern-space-10:40px;--discern-space-12:48px;--discern-space-16:64px;--discern-space-20:80px;--discern-space-24:96px;--discern-rhythm-related:var(--discern-space-2);--discern-rhythm-group:var(--discern-space-6);--discern-rhythm-section:var(--discern-space-10);--discern-control-size-sm:max(2rem,var(--discern-space-8));--discern-control-size-md:max(2.5rem,var(--discern-space-10));--discern-control-size-lg:max(3rem,var(--discern-space-12));--discern-radius-xs:4px;--discern-radius-sm:6px;--discern-radius-md:8px;--discern-radius-lg:12px;--discern-radius-pill:999px;--discern-duration-fast:150ms;--discern-duration-medium:300ms;--discern-duration-reveal:650ms;--discern-ease-out:cubic-bezier(0.22,1,0.36,1);--discern-ease-in-out:cubic-bezier(0.65,0,0.35,1);--discern-page-max:66.25rem;--discern-measure:62ch;--discern-avatar-size-xs:1.5rem;--discern-avatar-size-sm:2rem;--discern-avatar-size-md:2.5rem;--discern-avatar-size-lg:3.25rem;--discern-avatar-size-xl:4.5rem;--discern-section-space:clamp(4.5rem,9vw,7.75rem);--discern-color-ink:oklch(0% 0 0 / 0.87);--discern-color-ink-muted:oklch(0% 0 0 / 0.68);--discern-color-ink-faint:oklch(0% 0 0 / 0.55);--discern-color-canvas:oklch(100% 0 0);--discern-color-surface:oklch(98.8609% 0 0);--discern-color-surface-sunken:oklch(0% 0 0 / 0.045);--discern-color-inverse-surface:oklch(0% 0 0);--discern-color-inverse-ink:oklch(100% 0 0);--discern-color-action:oklch(0% 0 0);--discern-color-on-action:oklch(100% 0 0);--discern-color-accent-100:oklch(0% 0 0 / 0.05);--discern-color-accent-200:oklch(0% 0 0 / 0.09);--discern-color-accent-300:oklch(0% 0 0 / 0.17);--discern-color-accent-400:oklch(0% 0 0 / 0.32);--discern-color-accent-500:oklch(0% 0 0 / 0.52);--discern-color-accent-600:oklch(0% 0 0 / 0.82);--discern-color-accent-700:oklch(0% 0 0 / 0.93);--discern-color-accent-800:oklch(0% 0 0);--discern-color-border:oklch(0% 0 0 / 0.12);--discern-color-border-strong:oklch(0% 0 0 / 0.3);--discern-color-stripe:oklch(0% 0 0 / 0.07);--discern-color-material-shade:oklch(0% 0 0 / 0.035);--discern-color-material-highlight:oklch(100% 0 0 / 0.7);--discern-color-relief-shadow:oklch(0% 0 0 / 0.18);--discern-color-ambient:oklch(0% 0 0 / 0.075);--discern-color-success:oklch(0% 0 0 / 0.44);--discern-color-success-soft:oklch(0% 0 0 / 0.05);--discern-color-success-deep:oklch(0% 0 0 / 0.82);--discern-color-warning:oklch(0% 0 0 / 0.62);--discern-color-warning-soft:oklch(0% 0 0 / 0.07);--discern-color-warning-deep:oklch(0% 0 0 / 0.78);--discern-color-danger:oklch(0% 0 0);--discern-color-danger-soft:oklch(0% 0 0 / 0.1);--discern-shadow-color:oklch(0% 0 0);--discern-color-overlay:oklch(0% 0 0 / 0.38);--discern-color-accent-ink:oklch(0% 0 0 / 0.82);--discern-color-brand-artwork-mask:oklch(100% 0 0 / 0);--discern-color-brand-artwork-ink:oklch(0% 0 0 / 0.93);--discern-color-action-edge:oklch(0% 0 0 / 0.82);--discern-color-action-shadow:oklch(0% 0 0 / 0.82);--discern-color-neutral-edge:oklch(0% 0 0 / 0.87);--discern-color-neutral-shadow:oklch(0% 0 0 / 0.87);--discern-color-avatar-highlight:oklch(100% 0 0);--discern-color-avatar-fill-start:oklch(96.1902% 0 0);--discern-color-avatar-fill-end:oklch(94.2866% 0 0);--discern-color-series-1:oklch(66.76% 0.0939 249.4);--discern-color-series-2:oklch(39.22% 0.1285 254.9);--discern-color-series-3:oklch(85.43% 0.127 91.1);--discern-color-series-4:oklch(50.17% 0.1147 9.7);--discern-color-series-5:oklch(58.59% 0.1197 88.6);--discern-color-series-6:oklch(77.29% 0.1036 6.7);--discern-shadow-card:2px 2px 0 color-mix(in oklab,var(--discern-shadow-color) 4%,transparent);--discern-shadow-window:4px 5px 0 color-mix(in oklab,var(--discern-shadow-color) 6%,transparent);--discern-shadow-pop:6px 6px 0 color-mix(in oklab,var(--discern-shadow-color) 12%,transparent);--discern-brand-artwork-opacity:1;--discern-backdrop-theme-gain:1;}:where([data-discern-root][data-discern-theme="light"]){color-scheme:light;--discern-darkness:0;}:where([data-discern-root][data-discern-theme="dark"]){color-scheme:dark;--discern-darkness:1;--discern-color-ink:oklch(100% 0 0 / 0.92);--discern-color-ink-muted:oklch(100% 0 0 / 0.74);--discern-color-ink-faint:oklch(100% 0 0 / 0.55);--discern-color-canvas:oklch(0% 0 0);--discern-color-surface:oklch(18.1521% 0 0);--discern-color-surface-sunken:oklch(100% 0 0 / 0.025);--discern-color-inverse-surface:oklch(0% 0 0);--discern-color-inverse-ink:oklch(100% 0 0);--discern-color-action:oklch(100% 0 0);--discern-color-on-action:oklch(0% 0 0);--discern-color-accent-100:oklch(100% 0 0 / 0.06);--discern-color-accent-200:oklch(100% 0 0 / 0.1);--discern-color-accent-300:oklch(100% 0 0 / 0.18);--discern-color-accent-400:oklch(100% 0 0 / 0.34);--discern-color-accent-500:oklch(100% 0 0 / 0.55);--discern-color-accent-600:oklch(100% 0 0 / 0.85);--discern-color-accent-700:oklch(100% 0 0 / 0.94);--discern-color-accent-800:oklch(100% 0 0);--discern-color-border:oklch(100% 0 0 / 0.14);--discern-color-border-strong:oklch(100% 0 0 / 0.32);--discern-color-stripe:oklch(100% 0 0 / 0.09);--discern-color-material-shade:oklch(0% 0 0 / 0.16);--discern-color-material-highlight:oklch(100% 0 0 / 0.16);--discern-color-relief-shadow:oklch(0% 0 0 / 0.34);--discern-color-ambient:oklch(100% 0 0 / 0.14);--discern-color-success:oklch(100% 0 0 / 0.48);--discern-color-success-soft:oklch(100% 0 0 / 0.06);--discern-color-success-deep:oklch(100% 0 0 / 0.9);--discern-color-warning:oklch(100% 0 0 / 0.66);--discern-color-warning-soft:oklch(100% 0 0 / 0.09);--discern-color-warning-deep:oklch(100% 0 0 / 0.86);--discern-color-danger:oklch(100% 0 0);--discern-color-danger-soft:oklch(100% 0 0 / 0.12);--discern-shadow-color:oklch(100% 0 0);--discern-color-overlay:oklch(0% 0 0 / 0.62);--discern-color-accent-ink:oklch(100% 0 0 / 0.55);--discern-color-brand-artwork-mask:oklch(100% 0 0 / 0.74);--discern-color-brand-artwork-ink:oklch(100% 0 0 / 0.74);--discern-color-action-edge:oklch(100% 0 0 / 0.55);--discern-color-action-shadow:oklch(100% 0 0 / 0.68);--discern-color-neutral-edge:oklch(100% 0 0 / 0.32);--discern-color-neutral-shadow:oklch(100% 0 0);--discern-color-avatar-highlight:oklch(100% 0 0 / 0.18);--discern-color-avatar-fill-start:oklch(20.1242% 0 0);--discern-color-avatar-fill-end:oklch(26.0774% 0 0);--discern-color-series-1:oklch(76.73% 0.0773 248.9);--discern-color-series-2:oklch(67.08% 0.1055 247.3);--discern-color-series-3:oklch(87.88% 0.115 93.9);--discern-color-series-4:oklch(71.49% 0.094 0.4);--discern-color-series-5:oklch(73.81% 0.1175 92.7);--discern-color-series-6:oklch(83.8% 0.0682 7.1);--discern-shadow-card:2px 2px 0 color-mix(in oklab,var(--discern-shadow-color) 10%,transparent);--discern-shadow-window:4px 5px 0 color-mix(in oklab,var(--discern-shadow-color) 16%,transparent);--discern-shadow-pop:6px 6px 0 color-mix(in oklab,var(--discern-shadow-color) 28%,transparent);--discern-brand-artwork-opacity:0;--discern-backdrop-theme-gain:0.78;}@media (prefers-color-scheme:dark){:where([data-discern-root]:not([data-discern-theme])),:where([data-discern-root][data-discern-theme="system"]){color-scheme:dark;--discern-darkness:1;--discern-color-ink:oklch(100% 0 0 / 0.92);--discern-color-ink-muted:oklch(100% 0 0 / 0.74);--discern-color-ink-faint:oklch(100% 0 0 / 0.55);--discern-color-canvas:oklch(0% 0 0);--discern-color-surface:oklch(18.1521% 0 0);--discern-color-surface-sunken:oklch(100% 0 0 / 0.025);--discern-color-inverse-surface:oklch(0% 0 0);--discern-color-inverse-ink:oklch(100% 0 0);--discern-color-action:oklch(100% 0 0);--discern-color-on-action:oklch(0% 0 0);--discern-color-accent-100:oklch(100% 0 0 / 0.06);--discern-color-accent-200:oklch(100% 0 0 / 0.1);--discern-color-accent-300:oklch(100% 0 0 / 0.18);--discern-color-accent-400:oklch(100% 0 0 / 0.34);--discern-color-accent-500:oklch(100% 0 0 / 0.55);--discern-color-accent-600:oklch(100% 0 0 / 0.85);--discern-color-accent-700:oklch(100% 0 0 / 0.94);--discern-color-accent-800:oklch(100% 0 0);--discern-color-border:oklch(100% 0 0 / 0.14);--discern-color-border-strong:oklch(100% 0 0 / 0.32);--discern-color-stripe:oklch(100% 0 0 / 0.09);--discern-color-material-shade:oklch(0% 0 0 / 0.16);--discern-color-material-highlight:oklch(100% 0 0 / 0.16);--discern-color-relief-shadow:oklch(0% 0 0 / 0.34);--discern-color-ambient:oklch(100% 0 0 / 0.14);--discern-color-success:oklch(100% 0 0 / 0.48);--discern-color-success-soft:oklch(100% 0 0 / 0.06);--discern-color-success-deep:oklch(100% 0 0 / 0.9);--discern-color-warning:oklch(100% 0 0 / 0.66);--discern-color-warning-soft:oklch(100% 0 0 / 0.09);--discern-color-warning-deep:oklch(100% 0 0 / 0.86);--discern-color-danger:oklch(100% 0 0);--discern-color-danger-soft:oklch(100% 0 0 / 0.12);--discern-shadow-color:oklch(100% 0 0);--discern-color-overlay:oklch(0% 0 0 / 0.62);--discern-color-accent-ink:oklch(100% 0 0 / 0.55);--discern-color-brand-artwork-mask:oklch(100% 0 0 / 0.74);--discern-color-brand-artwork-ink:oklch(100% 0 0 / 0.74);--discern-color-action-edge:oklch(100% 0 0 / 0.55);--discern-color-action-shadow:oklch(100% 0 0 / 0.68);--discern-color-neutral-edge:oklch(100% 0 0 / 0.32);--discern-color-neutral-shadow:oklch(100% 0 0);--discern-color-avatar-highlight:oklch(100% 0 0 / 0.18);--discern-color-avatar-fill-start:oklch(20.1242% 0 0);--discern-color-avatar-fill-end:oklch(26.0774% 0 0);--discern-color-series-1:oklch(76.73% 0.0773 248.9);--discern-color-series-2:oklch(67.08% 0.1055 247.3);--discern-color-series-3:oklch(87.88% 0.115 93.9);--discern-color-series-4:oklch(71.49% 0.094 0.4);--discern-color-series-5:oklch(73.81% 0.1175 92.7);--discern-color-series-6:oklch(83.8% 0.0682 7.1);--discern-shadow-card:2px 2px 0 color-mix(in oklab,var(--discern-shadow-color) 10%,transparent);--discern-shadow-window:4px 5px 0 color-mix(in oklab,var(--discern-shadow-color) 16%,transparent);--discern-shadow-pop:6px 6px 0 color-mix(in oklab,var(--discern-shadow-color) 28%,transparent);--discern-brand-artwork-opacity:0;--discern-backdrop-theme-gain:0.78;}}@supports (color:oklch(from oklch(calc(round(up,abs(-0.2),1)*0.5) 0 0) l c h / 0.5)){:where([data-discern-root]){--discern-space-1:calc(4px*var(--discern-density));--discern-space-2:calc(8px*var(--discern-density));--discern-space-3:calc(12px*var(--discern-density));--discern-space-4:calc(16px*var(--discern-density));--discern-space-5:calc(20px*var(--discern-density));--discern-space-6:calc(24px*var(--discern-density));--discern-space-8:calc(32px*var(--discern-density));--discern-space-10:calc(40px*var(--discern-density));--discern-space-12:calc(48px*var(--discern-density));--discern-space-16:calc(64px*var(--discern-density));--discern-space-20:calc(80px*var(--discern-density));--discern-space-24:calc(96px*var(--discern-density));--discern-f-pl:calc(1 - (var(--discern-paper-tint)*.05));--discern-f-pc:calc(var(--discern-paper-tint)*.02);--discern-f-il:calc(var(--discern-ink-tint)*.14);--discern-f-ic:calc(var(--discern-ink-tint)*.021);--discern-f-pp:oklch(var(--discern-f-pl) var(--discern-f-pc) var(--discern-paper-tint-hue));--discern-f-ip:oklch(var(--discern-f-il) var(--discern-f-ic) var(--discern-ink-tint-hue));--discern-f-l:calc(var(--discern-f-pl)*(1 - var(--discern-darkness)) + var(--discern-f-il)*var(--discern-darkness));--discern-f-c:color-mix(in oklab,var(--discern-f-pp) calc((1 - var(--discern-darkness))*100%),var(--discern-f-ip));--discern-f-p:round(up,(((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l))) + abs((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l)))))/2),1);--discern-f-a:calc(var(--discern-f-il)*(1 - var(--discern-f-p)) + var(--discern-f-pl)*var(--discern-f-p));--discern-f-ac:calc(var(--discern-f-ic)*(1 - var(--discern-f-p)) + var(--discern-f-pc)*var(--discern-f-p));--discern-f-ah:calc(var(--discern-ink-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-paper-tint-hue)*var(--discern-f-p));--discern-f-o:calc(var(--discern-f-pl)*(1 - var(--discern-f-p)) + var(--discern-f-il)*var(--discern-f-p));--discern-f-oc:calc(var(--discern-f-pc)*(1 - var(--discern-f-p)) + var(--discern-f-ic)*var(--discern-f-p));--discern-f-oh:calc(var(--discern-paper-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-ink-tint-hue)*var(--discern-f-p));--discern-f-ap:oklch(var(--discern-f-a) var(--discern-f-ac) var(--discern-f-ah));--discern-f-op:oklch(var(--discern-f-o) var(--discern-f-oc) var(--discern-f-oh));--discern-f0:max(round(((((.87 + (-.03*var(--discern-f7))) + (.16*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.04*var(--discern-f3))),.0001),round(((.87 + .13*var(--discern-f13))*(1 - var(--discern-f-p)) + (1 - .08*var(--discern-f1))*var(--discern-f-p)),.0001));--discern-f1:clamp(0,((var(--discern-darkness) - .4364259205455763)/.5635740794544237),1);--discern-f2:clamp(0,((var(--discern-darkness) - .25)/.25),1);--discern-f3:clamp(0,((var(--discern-darkness) - .75)/.25),1);--discern-f4:clamp(0,((var(--discern-darkness) - .5)/.25),1);--discern-f5:calc(var(--discern-f10)*(1 - var(--discern-f-p)) + var(--discern-f11)*var(--discern-f-p));--discern-f6:round(clamp(0,(round(((.05*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.06*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001);--discern-f7:clamp(0,(var(--discern-darkness)/.25),1);--discern-f8:round(((.68 + .32*var(--discern-f13))*(1 - var(--discern-f-p)) + (1 - .26*var(--discern-f1))*var(--discern-f-p)),.0001);--discern-f9:round(clamp(0,(round(((((.09 + (.03*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.03*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001);--discern-f10:round((round(clamp(.5,(round(((((.82 + (.04*var(--discern-f7))) + (-.11*var(--discern-f2))) + (.11*var(--discern-f4))) + (-.01*var(--discern-f3))),.0001)*var(--discern-emphasis)),.86),.0001)*(1 - var(--discern-f16)) + .68*var(--discern-f16)),.0001);--discern-f11:max(round(((.5 + .22*var(--discern-f13))*(1 - var(--discern-f-p)) + (.72 - .17*var(--discern-f1))*var(--discern-f-p)),.0001),round(clamp(.5,(round(((((.52 + (.16*var(--discern-f7))) + (.12*var(--discern-f2))) + (-.14*var(--discern-f4))) + (-.11*var(--discern-f3))),.0001)*var(--discern-emphasis)),.9),.0001));--discern-f12:round(clamp(0,(round(((((.17 + (.05*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.06*var(--discern-f4))) + (-.04*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001);--discern-f13:clamp(0,(var(--discern-darkness)/.4364259205455763),1);--discern-f14:max(var(--discern-f0),round(clamp(.82,(round(((((.93 + (.03*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001));--discern-f15:round(clamp(0,(round(((((.3 + (.04*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.03*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001);--discern-f16:clamp(0,(1 - (abs((var(--discern-f-l) - .5635740794544237))/.25)),1);--discern-color-ink:oklch(from var(--discern-f-ap) l c h / var(--discern-f0));--discern-color-ink-muted:oklch(from var(--discern-f-ap) l c h / var(--discern-f8));--discern-color-ink-faint:oklch(from var(--discern-f-ap) l c h / round(((.55 + .17*var(--discern-f13))*(1 - var(--discern-f-p)) + (.72 - .17*var(--discern-f1))*var(--discern-f-p)),.0001));--discern-color-canvas:var(--discern-f-c);--discern-color-surface:color-mix(in srgb,var(--discern-f-ap) calc(round(((.015*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.07*var(--discern-f1))*var(--discern-f-p)),.0001)*100%),var(--discern-f-c));--discern-color-surface-sunken:oklch(from var(--discern-f-ap) l c h / round(((.045*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.025*var(--discern-f1))*var(--discern-f-p)),.0001));--discern-color-inverse-surface:oklch(from var(--discern-f-ip) l c h / 1);--discern-color-inverse-ink:oklch(from var(--discern-f-pp) l c h / 1);--discern-color-action:oklch(from var(--discern-f-ap) l c h / 1);--discern-color-on-action:oklch(from var(--discern-f-op) l c h / 1);--discern-color-accent-100:oklch(from var(--discern-f-ap) l c h / var(--discern-f6));--discern-color-accent-200:oklch(from var(--discern-f-ap) l c h / var(--discern-f9));--discern-color-accent-300:oklch(from var(--discern-f-ap) l c h / var(--discern-f12));--discern-color-accent-400:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.32 + (.07*var(--discern-f7))) + (.05*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.05*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001));--discern-color-accent-500:oklch(from var(--discern-f-ap) l c h / var(--discern-f11));--discern-color-accent-600:oklch(from var(--discern-f-ap) l c h / var(--discern-f10));--discern-color-accent-700:oklch(from var(--discern-f-ap) l c h / var(--discern-f14));--discern-color-accent-800:oklch(from var(--discern-f-ap) l c h / max(var(--discern-f0),round(clamp(.86,var(--discern-emphasis),1),.0001)));--discern-color-border:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.12 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001));--discern-color-border-strong:oklch(from var(--discern-f-ap) l c h / var(--discern-f15));--discern-color-stripe:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.07 + (.03*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.03*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001));--discern-color-material-shade:oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.035 + (.015*var(--discern-f7))) + (.025*var(--discern-f2))) + (.035*var(--discern-f4))) + (.05*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001));--discern-color-material-highlight:oklch(from var(--discern-f-pp) l c h / round(clamp(0,(round(((((.7 + (-.4*var(--discern-f7))) + (-.1*var(--discern-f2))) + (-.02*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001));--discern-color-relief-shadow:oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.18 + (.02*var(--discern-f7))) + (.06*var(--discern-f2))) + (.04*var(--discern-f4))) + (.04*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001));--discern-color-ambient:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.075 + (.005*var(--discern-f7))) + (.01*var(--discern-f2))) + (.03*var(--discern-f4))) + (.02*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001));--discern-color-success:oklch(from var(--discern-f-ap) l c h / round((round(clamp(.2,(round(((((.44 + (-.06*var(--discern-f7))) + (-.04*var(--discern-f2))) + (.08*var(--discern-f4))) + (.06*var(--discern-f3))),.0001)*var(--discern-emphasis)),.55),.0001)*(1 - var(--discern-f16)) + .18*var(--discern-f16)),.0001));--discern-color-success-soft:oklch(from var(--discern-f-ap) l c h / var(--discern-f6));--discern-color-success-deep:oklch(from var(--discern-f-ap) l c h / max(var(--discern-f8),round(clamp(0,(round(((.82 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))),.0001)*var(--discern-emphasis)),1),.0001)));--discern-color-warning:oklch(from var(--discern-f-ap) l c h / round((round(clamp(.35,(round(((((.62 + (-.02*var(--discern-f7))) + (-.02*var(--discern-f2))) + (.04*var(--discern-f4))) + (.04*var(--discern-f3))),.0001)*var(--discern-emphasis)),.72),.0001)*(1 - var(--discern-f16)) + .42*var(--discern-f16)),.0001));--discern-color-warning-soft:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((.07*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.09*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001));--discern-color-warning-deep:oklch(from var(--discern-f-ap) l c h / max(var(--discern-f8),round(clamp(0,(round(((.78 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))),.0001)*var(--discern-emphasis)),1),.0001)));--discern-color-danger:oklch(from var(--discern-f-ap) l c h / round((max(var(--discern-f0),round(clamp(.7,var(--discern-emphasis),1),.0001))*(1 - var(--discern-f16)) + var(--discern-f16)),.0001));--discern-color-danger-soft:oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((.1*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.12*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001));--discern-shadow-color:oklch(from var(--discern-f-ap) l c h / 1);--discern-color-overlay:oklch(from var(--discern-f-ip) l c h / round(((((.38 + (.06*var(--discern-f7))) + (.06*var(--discern-f2))) + (.06*var(--discern-f4))) + (.06*var(--discern-f3))),.0001));--discern-color-accent-ink:oklch(from var(--discern-f-ap) l c h / var(--discern-f5));--discern-color-brand-artwork-mask:oklch(from var(--discern-f-pp) l c h / calc(var(--discern-f8)*var(--discern-f-p)));--discern-color-brand-artwork-ink:oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f14)*(1 - var(--discern-f-p)) + var(--discern-f8)*var(--discern-f-p)));--discern-color-action-edge:oklch(from var(--discern-f-ap) l c h / var(--discern-f5));--discern-color-action-shadow:oklch(from var(--discern-f-ap) l c h / round(clamp(.22,(round(((((.82 + (-.04*var(--discern-f7))) + (-.06*var(--discern-f2))) + (-.02*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),.86),.0001));--discern-color-neutral-edge:oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f0)*(1 - var(--discern-f-p)) + var(--discern-f15)*var(--discern-f-p)));--discern-color-neutral-shadow:oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f0)*(1 - var(--discern-f-p)) + var(--discern-f-p)));--discern-color-avatar-highlight:oklch(from var(--discern-f-pp) l c h / calc((1 - var(--discern-f-p)) + var(--discern-f12)*var(--discern-f-p)));--discern-color-avatar-fill-start:color-mix(in srgb,var(--discern-f-ap) calc(calc(var(--discern-f6)*(1 - var(--discern-f-p)) + (var(--discern-f6)*.32 + var(--discern-f9)*.68)*var(--discern-f-p))*100%),var(--discern-f-c));--discern-color-avatar-fill-end:color-mix(in srgb,var(--discern-f-ap) calc(calc((var(--discern-f6)*.38 + var(--discern-f9)*.62)*(1 - var(--discern-f-p)) + (var(--discern-f9)*.48 + var(--discern-f12)*.52)*var(--discern-f-p))*100%),var(--discern-f-c));--discern-shadow-card:2px 2px 0 color-mix(in oklab,var(--discern-shadow-color) calc(round(clamp(0,(round((((.04 + (.02*var(--discern-f7))) + (.02*var(--discern-f2))) + (.02*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)*100%),transparent);--discern-shadow-window:4px 5px 0 color-mix(in oklab,var(--discern-shadow-color) calc(round(clamp(0,(round((((.06 + (.03*var(--discern-f7))) + (.03*var(--discern-f2))) + (.04*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)*100%),transparent);--discern-shadow-pop:6px 6px 0 color-mix(in oklab,var(--discern-shadow-color) calc(round(clamp(0,(round((((.12 + (.04*var(--discern-f7))) + (.06*var(--discern-f2))) + (.06*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)*100%),transparent);}}} @layer discern.theme { :where([data-discern-root][data-discern-accent="none"], [data-discern-root] [data-discern-accent="none"]) { --discern-color-ink: oklch(0% 0 0 / 0.87); --discern-color-ink-muted: oklch(0% 0 0 / 0.68); --discern-color-ink-faint: oklch(0% 0 0 / 0.55); --discern-color-canvas: oklch(100% 0 0); --discern-color-surface: oklch(98.8609% 0 0); --discern-color-surface-sunken: oklch(0% 0 0 / 0.045); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(0% 0 0); --discern-color-on-action: oklch(100% 0 0); --discern-color-accent-100: oklch(0% 0 0 / 0.05); --discern-color-accent-200: oklch(0% 0 0 / 0.09); --discern-color-accent-300: oklch(0% 0 0 / 0.17); --discern-color-accent-400: oklch(0% 0 0 / 0.32); --discern-color-accent-500: oklch(0% 0 0 / 0.52); --discern-color-accent-600: oklch(0% 0 0 / 0.82); --discern-color-accent-700: oklch(0% 0 0 / 0.93); --discern-color-accent-800: oklch(0% 0 0); --discern-color-border: oklch(0% 0 0 / 0.12); --discern-color-border-strong: oklch(0% 0 0 / 0.3); --discern-color-stripe: oklch(0% 0 0 / 0.07); --discern-color-material-shade: oklch(0% 0 0 / 0.035); --discern-color-material-highlight: oklch(100% 0 0 / 0.7); --discern-color-relief-shadow: oklch(0% 0 0 / 0.18); --discern-color-ambient: oklch(0% 0 0 / 0.075); --discern-color-success: oklch(0% 0 0 / 0.44); --discern-color-success-soft: oklch(0% 0 0 / 0.05); --discern-color-success-deep: oklch(0% 0 0 / 0.82); --discern-color-warning: oklch(0% 0 0 / 0.62); --discern-color-warning-soft: oklch(0% 0 0 / 0.07); --discern-color-warning-deep: oklch(0% 0 0 / 0.78); --discern-color-danger: oklch(0% 0 0); --discern-color-danger-soft: oklch(0% 0 0 / 0.1); --discern-shadow-color: oklch(0% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.38); --discern-color-accent-ink: oklch(0% 0 0 / 0.82); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0); --discern-color-brand-artwork-ink: oklch(0% 0 0 / 0.93); --discern-color-action-edge: oklch(0% 0 0 / 0.82); --discern-color-action-shadow: oklch(0% 0 0 / 0.82); --discern-color-neutral-edge: oklch(0% 0 0 / 0.87); --discern-color-neutral-shadow: oklch(0% 0 0 / 0.87); --discern-color-avatar-highlight: oklch(100% 0 0); --discern-color-avatar-fill-start: oklch(96.1902% 0 0); --discern-color-avatar-fill-end: oklch(94.2866% 0 0); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 4%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 6%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 12%, transparent); } :where([data-discern-root][data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root] [data-discern-accent]:not([data-discern-accent="none"])) { --discern-color-ink: oklch(0% 0 0 / 0.87); --discern-color-ink-muted: oklch(0% 0 0 / 0.68); --discern-color-ink-faint: oklch(0% 0 0 / 0.55); --discern-color-canvas: oklch(100% 0 0); --discern-color-surface: oklch(98.8609% 0 0); --discern-color-surface-sunken: oklch(0% 0 0 / 0.045); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(40% 0.16 var(--discern-accent-hue)); --discern-color-on-action: oklch(100% 0 0); --discern-color-accent-100: oklch(96.2% 0.019 var(--discern-accent-hue)); --discern-color-accent-200: oklch(92% 0.045 var(--discern-accent-hue)); --discern-color-accent-300: oklch(85% 0.082 var(--discern-accent-hue)); --discern-color-accent-400: oklch(73% 0.128 var(--discern-accent-hue)); --discern-color-accent-500: oklch(52% 0.185 var(--discern-accent-hue)); --discern-color-accent-600: oklch(52% 0.208 var(--discern-accent-hue)); --discern-color-accent-700: oklch(44% 0.185 var(--discern-accent-hue)); --discern-color-accent-800: oklch(34% 0.13 var(--discern-accent-hue)); --discern-color-border: oklch(0% 0 0 / 0.12); --discern-color-border-strong: oklch(0% 0 0 / 0.3); --discern-color-stripe: oklch(0% 0 0 / 0.07); --discern-color-material-shade: oklch(0% 0 0 / 0.035); --discern-color-material-highlight: oklch(100% 0 0 / 0.7); --discern-color-relief-shadow: oklch(0% 0 0 / 0.18); --discern-color-ambient: oklch(35% 0.045 var(--discern-accent-hue) / 0.075); --discern-color-success: oklch(64% 0.165 152); --discern-color-success-soft: oklch(95% 0.05 152); --discern-color-success-deep: oklch(37% 0.09 152); --discern-color-warning: oklch(64% 0.14 74); --discern-color-warning-soft: oklch(96% 0.045 74); --discern-color-warning-deep: oklch(50% 0.12 74); --discern-color-danger: oklch(42% 0.19 28); --discern-color-danger-soft: oklch(96% 0.035 28); --discern-shadow-color: oklch(0% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.38); --discern-color-accent-ink: oklch(52% 0.208 var(--discern-accent-hue)); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0); --discern-color-brand-artwork-ink: oklch(44% 0.185 var(--discern-accent-hue)); --discern-color-action-edge: oklch(44% 0.185 var(--discern-accent-hue)); --discern-color-action-shadow: oklch(0% 0 0 / 0.82); --discern-color-neutral-edge: oklch(0% 0 0 / 0.87); --discern-color-neutral-shadow: oklch(0% 0 0 / 0.87); --discern-color-avatar-highlight: oklch(100% 0 0); --discern-color-avatar-fill-start: oklch(96.2% 0.019 var(--discern-accent-hue)); --discern-color-avatar-fill-end: oklch(93.6% 0.0351 var(--discern-accent-hue)); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 4%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 6%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 12%, transparent); } :where([data-discern-root][data-discern-theme="dark"][data-discern-accent="none"], [data-discern-root][data-discern-theme="dark"] [data-discern-accent="none"]) { --discern-color-ink: oklch(100% 0 0 / 0.92); --discern-color-ink-muted: oklch(100% 0 0 / 0.74); --discern-color-ink-faint: oklch(100% 0 0 / 0.55); --discern-color-canvas: oklch(0% 0 0); --discern-color-surface: oklch(18.1521% 0 0); --discern-color-surface-sunken: oklch(100% 0 0 / 0.025); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(100% 0 0); --discern-color-on-action: oklch(0% 0 0); --discern-color-accent-100: oklch(100% 0 0 / 0.06); --discern-color-accent-200: oklch(100% 0 0 / 0.1); --discern-color-accent-300: oklch(100% 0 0 / 0.18); --discern-color-accent-400: oklch(100% 0 0 / 0.34); --discern-color-accent-500: oklch(100% 0 0 / 0.55); --discern-color-accent-600: oklch(100% 0 0 / 0.85); --discern-color-accent-700: oklch(100% 0 0 / 0.94); --discern-color-accent-800: oklch(100% 0 0); --discern-color-border: oklch(100% 0 0 / 0.14); --discern-color-border-strong: oklch(100% 0 0 / 0.32); --discern-color-stripe: oklch(100% 0 0 / 0.09); --discern-color-material-shade: oklch(0% 0 0 / 0.16); --discern-color-material-highlight: oklch(100% 0 0 / 0.16); --discern-color-relief-shadow: oklch(0% 0 0 / 0.34); --discern-color-ambient: oklch(100% 0 0 / 0.14); --discern-color-success: oklch(100% 0 0 / 0.48); --discern-color-success-soft: oklch(100% 0 0 / 0.06); --discern-color-success-deep: oklch(100% 0 0 / 0.9); --discern-color-warning: oklch(100% 0 0 / 0.66); --discern-color-warning-soft: oklch(100% 0 0 / 0.09); --discern-color-warning-deep: oklch(100% 0 0 / 0.86); --discern-color-danger: oklch(100% 0 0); --discern-color-danger-soft: oklch(100% 0 0 / 0.12); --discern-shadow-color: oklch(100% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.62); --discern-color-accent-ink: oklch(100% 0 0 / 0.55); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0.74); --discern-color-brand-artwork-ink: oklch(100% 0 0 / 0.74); --discern-color-action-edge: oklch(100% 0 0 / 0.55); --discern-color-action-shadow: oklch(100% 0 0 / 0.68); --discern-color-neutral-edge: oklch(100% 0 0 / 0.32); --discern-color-neutral-shadow: oklch(100% 0 0); --discern-color-avatar-highlight: oklch(100% 0 0 / 0.18); --discern-color-avatar-fill-start: oklch(20.1242% 0 0); --discern-color-avatar-fill-end: oklch(26.0774% 0 0); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 10%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 16%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 28%, transparent); } :where([data-discern-root][data-discern-theme="dark"][data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root][data-discern-theme="dark"] [data-discern-accent]:not([data-discern-accent="none"])) { --discern-color-ink: oklch(100% 0 0 / 0.92); --discern-color-ink-muted: oklch(100% 0 0 / 0.74); --discern-color-ink-faint: oklch(100% 0 0 / 0.55); --discern-color-canvas: oklch(0% 0 0); --discern-color-surface: oklch(18.1521% 0 0); --discern-color-surface-sunken: oklch(100% 0 0 / 0.025); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(80% 0.13 var(--discern-accent-hue)); --discern-color-on-action: oklch(0% 0 0); --discern-color-accent-100: oklch(35% 0.055 var(--discern-accent-hue)); --discern-color-accent-200: oklch(40% 0.08 var(--discern-accent-hue)); --discern-color-accent-300: oklch(46% 0.115 var(--discern-accent-hue)); --discern-color-accent-400: oklch(58% 0.15 var(--discern-accent-hue)); --discern-color-accent-500: oklch(70% 0.165 var(--discern-accent-hue)); --discern-color-accent-600: oklch(74% 0.14 var(--discern-accent-hue)); --discern-color-accent-700: oklch(82% 0.105 var(--discern-accent-hue)); --discern-color-accent-800: oklch(90% 0.06 var(--discern-accent-hue)); --discern-color-border: oklch(100% 0 0 / 0.14); --discern-color-border-strong: oklch(100% 0 0 / 0.32); --discern-color-stripe: oklch(100% 0 0 / 0.09); --discern-color-material-shade: oklch(0% 0 0 / 0.16); --discern-color-material-highlight: oklch(100% 0 0 / 0.16); --discern-color-relief-shadow: oklch(0% 0 0 / 0.34); --discern-color-ambient: oklch(90% 0.03 var(--discern-accent-hue) / 0.14); --discern-color-success: oklch(58% 0.155 152); --discern-color-success-soft: oklch(29% 0.06 152); --discern-color-success-deep: oklch(88% 0.1 152); --discern-color-warning: oklch(60% 0.13 82); --discern-color-warning-soft: oklch(30% 0.055 82); --discern-color-warning-deep: oklch(86% 0.1 82); --discern-color-danger: oklch(82% 0.17 28); --discern-color-danger-soft: oklch(29% 0.055 28); --discern-shadow-color: oklch(100% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.62); --discern-color-accent-ink: oklch(74% 0.14 var(--discern-accent-hue)); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0.74); --discern-color-brand-artwork-ink: oklch(100% 0 0 / 0.74); --discern-color-action-edge: oklch(82% 0.105 var(--discern-accent-hue)); --discern-color-action-shadow: oklch(100% 0 0 / 0.68); --discern-color-neutral-edge: oklch(100% 0 0 / 0.32); --discern-color-neutral-shadow: oklch(100% 0 0); --discern-color-avatar-highlight: oklch(100% 0 0 / 0.18); --discern-color-avatar-fill-start: oklch(38.4% 0.072 var(--discern-accent-hue)); --discern-color-avatar-fill-end: oklch(43.12% 0.0982 var(--discern-accent-hue)); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 10%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 16%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 28%, transparent); } @media (prefers-color-scheme: dark) { :where([data-discern-root]:not([data-discern-theme])[data-discern-accent="none"], [data-discern-root]:not([data-discern-theme]) [data-discern-accent="none"], [data-discern-root][data-discern-theme="system"][data-discern-accent="none"], [data-discern-root][data-discern-theme="system"] [data-discern-accent="none"]) { --discern-color-ink: oklch(100% 0 0 / 0.92); --discern-color-ink-muted: oklch(100% 0 0 / 0.74); --discern-color-ink-faint: oklch(100% 0 0 / 0.55); --discern-color-canvas: oklch(0% 0 0); --discern-color-surface: oklch(18.1521% 0 0); --discern-color-surface-sunken: oklch(100% 0 0 / 0.025); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(100% 0 0); --discern-color-on-action: oklch(0% 0 0); --discern-color-accent-100: oklch(100% 0 0 / 0.06); --discern-color-accent-200: oklch(100% 0 0 / 0.1); --discern-color-accent-300: oklch(100% 0 0 / 0.18); --discern-color-accent-400: oklch(100% 0 0 / 0.34); --discern-color-accent-500: oklch(100% 0 0 / 0.55); --discern-color-accent-600: oklch(100% 0 0 / 0.85); --discern-color-accent-700: oklch(100% 0 0 / 0.94); --discern-color-accent-800: oklch(100% 0 0); --discern-color-border: oklch(100% 0 0 / 0.14); --discern-color-border-strong: oklch(100% 0 0 / 0.32); --discern-color-stripe: oklch(100% 0 0 / 0.09); --discern-color-material-shade: oklch(0% 0 0 / 0.16); --discern-color-material-highlight: oklch(100% 0 0 / 0.16); --discern-color-relief-shadow: oklch(0% 0 0 / 0.34); --discern-color-ambient: oklch(100% 0 0 / 0.14); --discern-color-success: oklch(100% 0 0 / 0.48); --discern-color-success-soft: oklch(100% 0 0 / 0.06); --discern-color-success-deep: oklch(100% 0 0 / 0.9); --discern-color-warning: oklch(100% 0 0 / 0.66); --discern-color-warning-soft: oklch(100% 0 0 / 0.09); --discern-color-warning-deep: oklch(100% 0 0 / 0.86); --discern-color-danger: oklch(100% 0 0); --discern-color-danger-soft: oklch(100% 0 0 / 0.12); --discern-shadow-color: oklch(100% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.62); --discern-color-accent-ink: oklch(100% 0 0 / 0.55); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0.74); --discern-color-brand-artwork-ink: oklch(100% 0 0 / 0.74); --discern-color-action-edge: oklch(100% 0 0 / 0.55); --discern-color-action-shadow: oklch(100% 0 0 / 0.68); --discern-color-neutral-edge: oklch(100% 0 0 / 0.32); --discern-color-neutral-shadow: oklch(100% 0 0); --discern-color-avatar-highlight: oklch(100% 0 0 / 0.18); --discern-color-avatar-fill-start: oklch(20.1242% 0 0); --discern-color-avatar-fill-end: oklch(26.0774% 0 0); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 10%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 16%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 28%, transparent); } :where([data-discern-root]:not([data-discern-theme])[data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root]:not([data-discern-theme]) [data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root][data-discern-theme="system"][data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root][data-discern-theme="system"] [data-discern-accent]:not([data-discern-accent="none"])) { --discern-color-ink: oklch(100% 0 0 / 0.92); --discern-color-ink-muted: oklch(100% 0 0 / 0.74); --discern-color-ink-faint: oklch(100% 0 0 / 0.55); --discern-color-canvas: oklch(0% 0 0); --discern-color-surface: oklch(18.1521% 0 0); --discern-color-surface-sunken: oklch(100% 0 0 / 0.025); --discern-color-inverse-surface: oklch(0% 0 0); --discern-color-inverse-ink: oklch(100% 0 0); --discern-color-action: oklch(80% 0.13 var(--discern-accent-hue)); --discern-color-on-action: oklch(0% 0 0); --discern-color-accent-100: oklch(35% 0.055 var(--discern-accent-hue)); --discern-color-accent-200: oklch(40% 0.08 var(--discern-accent-hue)); --discern-color-accent-300: oklch(46% 0.115 var(--discern-accent-hue)); --discern-color-accent-400: oklch(58% 0.15 var(--discern-accent-hue)); --discern-color-accent-500: oklch(70% 0.165 var(--discern-accent-hue)); --discern-color-accent-600: oklch(74% 0.14 var(--discern-accent-hue)); --discern-color-accent-700: oklch(82% 0.105 var(--discern-accent-hue)); --discern-color-accent-800: oklch(90% 0.06 var(--discern-accent-hue)); --discern-color-border: oklch(100% 0 0 / 0.14); --discern-color-border-strong: oklch(100% 0 0 / 0.32); --discern-color-stripe: oklch(100% 0 0 / 0.09); --discern-color-material-shade: oklch(0% 0 0 / 0.16); --discern-color-material-highlight: oklch(100% 0 0 / 0.16); --discern-color-relief-shadow: oklch(0% 0 0 / 0.34); --discern-color-ambient: oklch(90% 0.03 var(--discern-accent-hue) / 0.14); --discern-color-success: oklch(58% 0.155 152); --discern-color-success-soft: oklch(29% 0.06 152); --discern-color-success-deep: oklch(88% 0.1 152); --discern-color-warning: oklch(60% 0.13 82); --discern-color-warning-soft: oklch(30% 0.055 82); --discern-color-warning-deep: oklch(86% 0.1 82); --discern-color-danger: oklch(82% 0.17 28); --discern-color-danger-soft: oklch(29% 0.055 28); --discern-shadow-color: oklch(100% 0 0); --discern-color-overlay: oklch(0% 0 0 / 0.62); --discern-color-accent-ink: oklch(74% 0.14 var(--discern-accent-hue)); --discern-color-brand-artwork-mask: oklch(100% 0 0 / 0.74); --discern-color-brand-artwork-ink: oklch(100% 0 0 / 0.74); --discern-color-action-edge: oklch(82% 0.105 var(--discern-accent-hue)); --discern-color-action-shadow: oklch(100% 0 0 / 0.68); --discern-color-neutral-edge: oklch(100% 0 0 / 0.32); --discern-color-neutral-shadow: oklch(100% 0 0); --discern-color-avatar-highlight: oklch(100% 0 0 / 0.18); --discern-color-avatar-fill-start: oklch(38.4% 0.072 var(--discern-accent-hue)); --discern-color-avatar-fill-end: oklch(43.12% 0.0982 var(--discern-accent-hue)); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) 10%, transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) 16%, transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) 28%, transparent); } } @supports (color: oklch(from oklch(calc(round(up, abs(-0.2), 1) * 0.5) 0 0) l c h / 0.5)) { :where([data-discern-root][data-discern-accent="none"], [data-discern-root] [data-discern-accent="none"]) { --discern-f-pl: calc(1 - (var(--discern-paper-tint)*.05)); --discern-f-pc: calc(var(--discern-paper-tint)*.02); --discern-f-il: calc(var(--discern-ink-tint)*.14); --discern-f-ic: calc(var(--discern-ink-tint)*.021); --discern-f-pp: oklch(var(--discern-f-pl) var(--discern-f-pc) var(--discern-paper-tint-hue)); --discern-f-ip: oklch(var(--discern-f-il) var(--discern-f-ic) var(--discern-ink-tint-hue)); --discern-f-l: calc(var(--discern-f-pl)*(1 - var(--discern-darkness)) + var(--discern-f-il)*var(--discern-darkness)); --discern-f-c: color-mix(in oklab, var(--discern-f-pp) calc((1 - var(--discern-darkness)) * 100%), var(--discern-f-ip)); --discern-f-p: round(up,(((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l))) + abs((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l)))))/2),1); --discern-f-a: calc(var(--discern-f-il)*(1 - var(--discern-f-p)) + var(--discern-f-pl)*var(--discern-f-p)); --discern-f-ac: calc(var(--discern-f-ic)*(1 - var(--discern-f-p)) + var(--discern-f-pc)*var(--discern-f-p)); --discern-f-ah: calc(var(--discern-ink-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-paper-tint-hue)*var(--discern-f-p)); --discern-f-o: calc(var(--discern-f-pl)*(1 - var(--discern-f-p)) + var(--discern-f-il)*var(--discern-f-p)); --discern-f-oc: calc(var(--discern-f-pc)*(1 - var(--discern-f-p)) + var(--discern-f-ic)*var(--discern-f-p)); --discern-f-oh: calc(var(--discern-paper-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-ink-tint-hue)*var(--discern-f-p)); --discern-f-ap: oklch(var(--discern-f-a) var(--discern-f-ac) var(--discern-f-ah)); --discern-f-op: oklch(var(--discern-f-o) var(--discern-f-oc) var(--discern-f-oh)); --discern-f0: max(round(((((.87 + (-.03*var(--discern-f7))) + (.16*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.04*var(--discern-f3))),.0001),round(((.87 + .13*var(--discern-f13))*(1 - var(--discern-f-p)) + (1 - .08*var(--discern-f1))*var(--discern-f-p)),.0001)); --discern-f1: clamp(0,((var(--discern-darkness) - .4364259205455763)/.5635740794544237),1); --discern-f2: clamp(0,((var(--discern-darkness) - .25)/.25),1); --discern-f3: clamp(0,((var(--discern-darkness) - .75)/.25),1); --discern-f4: clamp(0,((var(--discern-darkness) - .5)/.25),1); --discern-f5: calc(var(--discern-f10)*(1 - var(--discern-f-p)) + var(--discern-f11)*var(--discern-f-p)); --discern-f6: round(clamp(0,(round(((.05*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.06*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001); --discern-f7: clamp(0,(var(--discern-darkness)/.25),1); --discern-f8: round(((.68 + .32*var(--discern-f13))*(1 - var(--discern-f-p)) + (1 - .26*var(--discern-f1))*var(--discern-f-p)),.0001); --discern-f9: round(clamp(0,(round(((((.09 + (.03*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.03*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001); --discern-f10: round((round(clamp(.5,(round(((((.82 + (.04*var(--discern-f7))) + (-.11*var(--discern-f2))) + (.11*var(--discern-f4))) + (-.01*var(--discern-f3))),.0001)*var(--discern-emphasis)),.86),.0001)*(1 - var(--discern-f16)) + .68*var(--discern-f16)),.0001); --discern-f11: max(round(((.5 + .22*var(--discern-f13))*(1 - var(--discern-f-p)) + (.72 - .17*var(--discern-f1))*var(--discern-f-p)),.0001),round(clamp(.5,(round(((((.52 + (.16*var(--discern-f7))) + (.12*var(--discern-f2))) + (-.14*var(--discern-f4))) + (-.11*var(--discern-f3))),.0001)*var(--discern-emphasis)),.9),.0001)); --discern-f12: round(clamp(0,(round(((((.17 + (.05*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.06*var(--discern-f4))) + (-.04*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001); --discern-f13: clamp(0,(var(--discern-darkness)/.4364259205455763),1); --discern-f14: max(var(--discern-f0),round(clamp(.82,(round(((((.93 + (.03*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001)); --discern-f15: round(clamp(0,(round(((((.3 + (.04*var(--discern-f7))) + (.06*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.03*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001); --discern-f16: clamp(0,(1 - (abs((var(--discern-f-l) - .5635740794544237))/.25)),1); --discern-color-ink: oklch(from var(--discern-f-ap) l c h / var(--discern-f0)); --discern-color-ink-muted: oklch(from var(--discern-f-ap) l c h / var(--discern-f8)); --discern-color-ink-faint: oklch(from var(--discern-f-ap) l c h / round(((.55 + .17*var(--discern-f13))*(1 - var(--discern-f-p)) + (.72 - .17*var(--discern-f1))*var(--discern-f-p)),.0001)); --discern-color-canvas: var(--discern-f-c); --discern-color-surface: color-mix(in srgb, var(--discern-f-ap) calc(round(((.015*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.07*var(--discern-f1))*var(--discern-f-p)),.0001) * 100%), var(--discern-f-c)); --discern-color-surface-sunken: oklch(from var(--discern-f-ap) l c h / round(((.045*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.025*var(--discern-f1))*var(--discern-f-p)),.0001)); --discern-color-inverse-surface: oklch(from var(--discern-f-ip) l c h / 1); --discern-color-inverse-ink: oklch(from var(--discern-f-pp) l c h / 1); --discern-color-action: oklch(from var(--discern-f-ap) l c h / 1); --discern-color-on-action: oklch(from var(--discern-f-op) l c h / 1); --discern-color-accent-100: oklch(from var(--discern-f-ap) l c h / var(--discern-f6)); --discern-color-accent-200: oklch(from var(--discern-f-ap) l c h / var(--discern-f9)); --discern-color-accent-300: oklch(from var(--discern-f-ap) l c h / var(--discern-f12)); --discern-color-accent-400: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.32 + (.07*var(--discern-f7))) + (.05*var(--discern-f2))) + (-.05*var(--discern-f4))) + (-.05*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001)); --discern-color-accent-500: oklch(from var(--discern-f-ap) l c h / var(--discern-f11)); --discern-color-accent-600: oklch(from var(--discern-f-ap) l c h / var(--discern-f10)); --discern-color-accent-700: oklch(from var(--discern-f-ap) l c h / var(--discern-f14)); --discern-color-accent-800: oklch(from var(--discern-f-ap) l c h / max(var(--discern-f0),round(clamp(.86,var(--discern-emphasis),1),.0001))); --discern-color-border: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.12 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.04*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-border-strong: oklch(from var(--discern-f-ap) l c h / var(--discern-f15)); --discern-color-stripe: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.07 + (.03*var(--discern-f7))) + (.04*var(--discern-f2))) + (-.03*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-material-shade: oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.035 + (.015*var(--discern-f7))) + (.025*var(--discern-f2))) + (.035*var(--discern-f4))) + (.05*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-material-highlight: oklch(from var(--discern-f-pp) l c h / round(clamp(0,(round(((((.7 + (-.4*var(--discern-f7))) + (-.1*var(--discern-f2))) + (-.02*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-relief-shadow: oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.18 + (.02*var(--discern-f7))) + (.06*var(--discern-f2))) + (.04*var(--discern-f4))) + (.04*var(--discern-f3))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-ambient: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.075 + (.005*var(--discern-f7))) + (.01*var(--discern-f2))) + (.03*var(--discern-f4))) + (.02*var(--discern-f3))),.0001)*var(--discern-emphasis)),1),.0001)); --discern-color-success: oklch(from var(--discern-f-ap) l c h / round((round(clamp(.2,(round(((((.44 + (-.06*var(--discern-f7))) + (-.04*var(--discern-f2))) + (.08*var(--discern-f4))) + (.06*var(--discern-f3))),.0001)*var(--discern-emphasis)),.55),.0001)*(1 - var(--discern-f16)) + .18*var(--discern-f16)),.0001)); --discern-color-success-soft: oklch(from var(--discern-f-ap) l c h / var(--discern-f6)); --discern-color-success-deep: oklch(from var(--discern-f-ap) l c h / max(var(--discern-f8),round(clamp(0,(round(((.82 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))),.0001)*var(--discern-emphasis)),1),.0001))); --discern-color-warning: oklch(from var(--discern-f-ap) l c h / round((round(clamp(.35,(round(((((.62 + (-.02*var(--discern-f7))) + (-.02*var(--discern-f2))) + (.04*var(--discern-f4))) + (.04*var(--discern-f3))),.0001)*var(--discern-emphasis)),.72),.0001)*(1 - var(--discern-f16)) + .42*var(--discern-f16)),.0001)); --discern-color-warning-soft: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((.07*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.09*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001)); --discern-color-warning-deep: oklch(from var(--discern-f-ap) l c h / max(var(--discern-f8),round(clamp(0,(round(((.78 + (.04*var(--discern-f7))) + (.04*var(--discern-f2))),.0001)*var(--discern-emphasis)),1),.0001))); --discern-color-danger: oklch(from var(--discern-f-ap) l c h / round((max(var(--discern-f0),round(clamp(.7,var(--discern-emphasis),1),.0001))*(1 - var(--discern-f16)) + var(--discern-f16)),.0001)); --discern-color-danger-soft: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((.1*(1 - var(--discern-f13)))*(1 - var(--discern-f-p)) + (.12*var(--discern-f1))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),1),.0001)); --discern-shadow-color: oklch(from var(--discern-f-ap) l c h / 1); --discern-color-overlay: oklch(from var(--discern-f-ip) l c h / round(((((.38 + (.06*var(--discern-f7))) + (.06*var(--discern-f2))) + (.06*var(--discern-f4))) + (.06*var(--discern-f3))),.0001)); --discern-color-accent-ink: oklch(from var(--discern-f-ap) l c h / var(--discern-f5)); --discern-color-brand-artwork-mask: oklch(from var(--discern-f-pp) l c h / calc(var(--discern-f8)*var(--discern-f-p))); --discern-color-brand-artwork-ink: oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f14)*(1 - var(--discern-f-p)) + var(--discern-f8)*var(--discern-f-p))); --discern-color-action-edge: oklch(from var(--discern-f-ap) l c h / var(--discern-f5)); --discern-color-action-shadow: oklch(from var(--discern-f-ap) l c h / round(clamp(.22,(round(((((.82 + (-.04*var(--discern-f7))) + (-.06*var(--discern-f2))) + (-.02*var(--discern-f4))) + (-.02*var(--discern-f3))),.0001)*var(--discern-structure)),.86),.0001)); --discern-color-neutral-edge: oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f0)*(1 - var(--discern-f-p)) + var(--discern-f15)*var(--discern-f-p))); --discern-color-neutral-shadow: oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f0)*(1 - var(--discern-f-p)) + var(--discern-f-p))); --discern-color-avatar-highlight: oklch(from var(--discern-f-pp) l c h / calc((1 - var(--discern-f-p)) + var(--discern-f12)*var(--discern-f-p))); --discern-color-avatar-fill-start: color-mix(in srgb, var(--discern-f-ap) calc(calc(var(--discern-f6)*(1 - var(--discern-f-p)) + (var(--discern-f6)*.32 + var(--discern-f9)*.68)*var(--discern-f-p)) * 100%), var(--discern-f-c)); --discern-color-avatar-fill-end: color-mix(in srgb, var(--discern-f-ap) calc(calc((var(--discern-f6)*.38 + var(--discern-f9)*.62)*(1 - var(--discern-f-p)) + (var(--discern-f9)*.48 + var(--discern-f12)*.52)*var(--discern-f-p)) * 100%), var(--discern-f-c)); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.04 + (.02*var(--discern-f7))) + (.02*var(--discern-f2))) + (.02*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.06 + (.03*var(--discern-f7))) + (.03*var(--discern-f2))) + (.04*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.12 + (.04*var(--discern-f7))) + (.06*var(--discern-f2))) + (.06*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); } :where([data-discern-root][data-discern-accent]:not([data-discern-accent="none"]), [data-discern-root] [data-discern-accent]:not([data-discern-accent="none"])) { --discern-f-pl: calc(1 - (var(--discern-paper-tint)*.05)); --discern-f-pc: calc(var(--discern-paper-tint)*.02); --discern-f-il: calc(var(--discern-ink-tint)*.14); --discern-f-ic: calc(var(--discern-ink-tint)*.021); --discern-f-pp: oklch(var(--discern-f-pl) var(--discern-f-pc) var(--discern-paper-tint-hue)); --discern-f-ip: oklch(var(--discern-f-il) var(--discern-f-ic) var(--discern-ink-tint-hue)); --discern-f-l: calc(var(--discern-f-pl)*(1 - var(--discern-darkness)) + var(--discern-f-il)*var(--discern-darkness)); --discern-f-c: color-mix(in oklab, var(--discern-f-pp) calc((1 - var(--discern-darkness)) * 100%), var(--discern-f-ip)); --discern-f-p: round(up,(((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l))) + abs((.179 - ((var(--discern-f-l)*var(--discern-f-l))*var(--discern-f-l)))))/2),1); --discern-f-a: calc(var(--discern-f-il)*(1 - var(--discern-f-p)) + var(--discern-f-pl)*var(--discern-f-p)); --discern-f-ac: calc(var(--discern-f-ic)*(1 - var(--discern-f-p)) + var(--discern-f-pc)*var(--discern-f-p)); --discern-f-ah: calc(var(--discern-ink-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-paper-tint-hue)*var(--discern-f-p)); --discern-f-o: calc(var(--discern-f-pl)*(1 - var(--discern-f-p)) + var(--discern-f-il)*var(--discern-f-p)); --discern-f-oc: calc(var(--discern-f-pc)*(1 - var(--discern-f-p)) + var(--discern-f-ic)*var(--discern-f-p)); --discern-f-oh: calc(var(--discern-paper-tint-hue)*(1 - var(--discern-f-p)) + var(--discern-ink-tint-hue)*var(--discern-f-p)); --discern-f-ap: oklch(var(--discern-f-a) var(--discern-f-ac) var(--discern-f-ah)); --discern-f-op: oklch(var(--discern-f-o) var(--discern-f-oc) var(--discern-f-oh)); --discern-f0: clamp(0,((var(--discern-darkness) - .4364259205455763)/.5635740794544237),1); --discern-f1: clamp(0,(var(--discern-darkness)/.4364259205455763),1); --discern-f2: max(round(((((.87 + (-.03*var(--discern-f8))) + (.16*var(--discern-f3))) + (-.04*var(--discern-f5))) + (-.04*var(--discern-f4))),.0001),round(((.87 + .13*var(--discern-f1))*(1 - var(--discern-f-p)) + (1 - .08*var(--discern-f0))*var(--discern-f-p)),.0001)); --discern-f3: clamp(0,((var(--discern-darkness) - .25)/.25),1); --discern-f4: clamp(0,((var(--discern-darkness) - .75)/.25),1); --discern-f5: clamp(0,((var(--discern-darkness) - .5)/.25),1); --discern-f6: clamp(0,((var(--discern-f-pl) - var(--discern-f-l))/(var(--discern-f-pl) - .5635740794544237)),1); --discern-f7: clamp(0,((.5635740794544237 - var(--discern-f-l))/(.5635740794544237 - var(--discern-f-il))),1); --discern-f8: clamp(0,(var(--discern-darkness)/.25),1); --discern-f9: round(clamp(0,(round(((.185 - .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.115 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001); --discern-f10: round(((.68 + .32*var(--discern-f1))*(1 - var(--discern-f-p)) + (1 - .26*var(--discern-f0))*var(--discern-f-p)),.0001); --discern-f11: round(clamp(0,(round(((((.3 + (.04*var(--discern-f8))) + (.06*var(--discern-f3))) + (-.05*var(--discern-f5))) + (-.03*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001); --discern-f12: round(clamp(0,(round(((.208 - .008*var(--discern-f1))*(1 - var(--discern-f-p)) + (.15 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001); --discern-f13: round(((.44 - .08*var(--discern-f1))*(1 - var(--discern-f-p)) + .82*var(--discern-f-p)),.0001); --discern-f14: round(((74 + 4*var(--discern-f1))*(1 - var(--discern-f-p)) + 82*var(--discern-f-p)),.0001); --discern-f15: round(((.52 - .08*var(--discern-f1))*(1 - var(--discern-f-p)) + (.72 + .02*var(--discern-f0))*var(--discern-f-p)),.0001); --discern-color-ink: oklch(from var(--discern-f-ap) l c h / var(--discern-f2)); --discern-color-ink-muted: oklch(from var(--discern-f-ap) l c h / var(--discern-f10)); --discern-color-ink-faint: oklch(from var(--discern-f-ap) l c h / round(((.55 + .17*var(--discern-f1))*(1 - var(--discern-f-p)) + (.72 - .17*var(--discern-f0))*var(--discern-f-p)),.0001)); --discern-color-canvas: var(--discern-f-c); --discern-color-surface: color-mix(in srgb, var(--discern-f-ap) calc(round(((.015*(1 - var(--discern-f1)))*(1 - var(--discern-f-p)) + (.07*var(--discern-f0))*var(--discern-f-p)),.0001) * 100%), var(--discern-f-c)); --discern-color-surface-sunken: oklch(from var(--discern-f-ap) l c h / round(((.045*(1 - var(--discern-f1)))*(1 - var(--discern-f-p)) + (.025*var(--discern-f0))*var(--discern-f-p)),.0001)); --discern-color-inverse-surface: oklch(from var(--discern-f-ip) l c h / 1); --discern-color-inverse-ink: oklch(from var(--discern-f-pp) l c h / 1); --discern-color-action: oklch(round(((.4 - .06*var(--discern-f1))*(1 - var(--discern-f-p)) + (.82 - .02*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round((.16*(1 - var(--discern-f-p)) + .13*var(--discern-f-p)),.0001)*max(.8,var(--discern-emphasis))),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-on-action: oklch(from var(--discern-f-op) l c h / 1); --discern-color-accent-100: oklch(round(((.962 - .062*var(--discern-f1))*(1 - var(--discern-f-p)) + (.32 + .03*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.019 + .011*var(--discern-f1))*(1 - var(--discern-f-p)) + (.065 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-accent-200: oklch(round(((.92 - .08*var(--discern-f1))*(1 - var(--discern-f-p)) + (.36 + .04*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.045 + .015*var(--discern-f1))*(1 - var(--discern-f-p)) + (.09 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-accent-300: oklch(round(((.85 - .09*var(--discern-f1))*(1 - var(--discern-f-p)) + (.42 + .04*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.082 + .018*var(--discern-f1))*(1 - var(--discern-f-p)) + (.125 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-accent-400: oklch(round(((.73 - .09*var(--discern-f1))*(1 - var(--discern-f-p)) + (.54 + .04*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.128 + .012*var(--discern-f1))*(1 - var(--discern-f-p)) + (.16 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-accent-500: oklch(round(((.52 - .03*var(--discern-f1))*(1 - var(--discern-f-p)) + (.65 + .05*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.185 + .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.175 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-accent-600: oklch(var(--discern-f15) var(--discern-f12) var(--discern-accent-hue) / 1); --discern-color-accent-700: oklch(var(--discern-f13) var(--discern-f9) var(--discern-accent-hue) / 1); --discern-color-accent-800: oklch(round(((.34 - .06*var(--discern-f1))*(1 - var(--discern-f-p)) + .9*var(--discern-f-p)),.0001) round(clamp(0,(round((.13*(1 - var(--discern-f-p)) + (.07 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-border: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.12 + (.04*var(--discern-f8))) + (.04*var(--discern-f3))) + (-.04*var(--discern-f5))) + (-.02*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-border-strong: oklch(from var(--discern-f-ap) l c h / var(--discern-f11)); --discern-color-stripe: oklch(from var(--discern-f-ap) l c h / round(clamp(0,(round(((((.07 + (.03*var(--discern-f8))) + (.04*var(--discern-f3))) + (-.03*var(--discern-f5))) + (-.02*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-material-shade: oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.035 + (.015*var(--discern-f8))) + (.025*var(--discern-f3))) + (.035*var(--discern-f5))) + (.05*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-material-highlight: oklch(from var(--discern-f-pp) l c h / round(clamp(0,(round(((((.7 + (-.4*var(--discern-f8))) + (-.1*var(--discern-f3))) + (-.02*var(--discern-f5))) + (-.02*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-relief-shadow: oklch(from var(--discern-f-ip) l c h / round(clamp(0,(round(((((.18 + (.02*var(--discern-f8))) + (.06*var(--discern-f3))) + (.04*var(--discern-f5))) + (.04*var(--discern-f4))),.0001)*var(--discern-structure)),1),.0001)); --discern-color-ambient: oklch(round(((.35 - .07*var(--discern-f1))*(1 - var(--discern-f-p)) + (.86 + .04*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.045 - .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.035 - .005*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / round(clamp(0,(round(((((.075 + (.005*var(--discern-f8))) + (.01*var(--discern-f3))) + (.03*var(--discern-f5))) + (.02*var(--discern-f4))),.0001)*var(--discern-emphasis)),1),.0001)); --discern-color-success: oklch(round(((.64 - .04*var(--discern-f1))*(1 - var(--discern-f-p)) + (.56 + .02*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.165 + .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.17 - .015*var(--discern-f0))*var(--discern-f-p)),.0001)*max(.5,var(--discern-emphasis))),.28),.0001) 152 / 1); --discern-color-success-soft: oklch(round(((.95 - .03*var(--discern-f1))*(1 - var(--discern-f-p)) + (.26 + .03*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.05 + .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.065 - .005*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) 152 / 1); --discern-color-success-deep: oklch(round(((.37*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (1 - .12*var(--discern-f7))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.09*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (.1*var(--discern-f7))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) 152 / 1); --discern-color-warning: oklch(round(((.64 - .04*var(--discern-f1))*(1 - var(--discern-f-p)) + (.58 + .02*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.14 + .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.14 - .01*var(--discern-f0))*var(--discern-f-p)),.0001)*max(.5,var(--discern-emphasis))),.28),.0001) var(--discern-f14) / 1); --discern-color-warning-soft: oklch(round(((.96 - .04*var(--discern-f1))*(1 - var(--discern-f-p)) + (.27 + .03*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.045 + .005*var(--discern-f1))*(1 - var(--discern-f-p)) + (.06 - .005*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-f14) / 1); --discern-color-warning-deep: oklch(round(((.5*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (1 - .14*var(--discern-f7))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.12*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (.1*var(--discern-f7))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-f14) / 1); --discern-color-danger: oklch(round(((.42*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (1 - .18*var(--discern-f7))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.19*(1 - var(--discern-f6)))*(1 - var(--discern-f-p)) + (.17*var(--discern-f7))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) 28 / 1); --discern-color-danger-soft: oklch(round(((.96 - .04*var(--discern-f1))*(1 - var(--discern-f-p)) + (.26 + .03*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.035 + .01*var(--discern-f1))*(1 - var(--discern-f-p)) + (.06 - .005*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) 28 / 1); --discern-shadow-color: oklch(from var(--discern-f-ap) l c h / 1); --discern-color-overlay: oklch(from var(--discern-f-ip) l c h / round(((((.38 + (.06*var(--discern-f8))) + (.06*var(--discern-f3))) + (.06*var(--discern-f5))) + (.06*var(--discern-f4))),.0001)); --discern-color-accent-ink: oklch(var(--discern-f15) var(--discern-f12) var(--discern-accent-hue) / 1); --discern-color-brand-artwork-mask: oklch(from var(--discern-f-pp) l c h / calc(var(--discern-f10)*var(--discern-f-p))); --discern-color-brand-artwork-ink: oklch(calc(var(--discern-f13)*(1 - var(--discern-f-p)) + var(--discern-f-p)) calc(var(--discern-f9)*(1 - var(--discern-f-p))) calc(var(--discern-accent-hue)*(1 - var(--discern-f-p))) / calc((1 - var(--discern-f-p)) + var(--discern-f10)*var(--discern-f-p))); --discern-color-action-edge: oklch(var(--discern-f13) var(--discern-f9) var(--discern-accent-hue) / 1); --discern-color-action-shadow: oklch(from var(--discern-f-ap) l c h / round(clamp(.22,(round(((((.82 + (-.04*var(--discern-f8))) + (-.06*var(--discern-f3))) + (-.02*var(--discern-f5))) + (-.02*var(--discern-f4))),.0001)*var(--discern-structure)),.86),.0001)); --discern-color-neutral-edge: oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f2)*(1 - var(--discern-f-p)) + var(--discern-f11)*var(--discern-f-p))); --discern-color-neutral-shadow: oklch(from var(--discern-f-ap) l c h / calc(var(--discern-f2)*(1 - var(--discern-f-p)) + var(--discern-f-p))); --discern-color-avatar-highlight: oklch(from var(--discern-f-pp) l c h / calc((1 - var(--discern-f-p)) + round(clamp(0,(round(((((.17 + (.05*var(--discern-f8))) + (.06*var(--discern-f3))) + (-.06*var(--discern-f5))) + (-.04*var(--discern-f4))),.0001)*var(--discern-emphasis)),1),.0001)*var(--discern-f-p))); --discern-color-avatar-fill-start: oklch(round(((.962 - .062*var(--discern-f1))*(1 - var(--discern-f-p)) + (.35 + .034*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.019 + .011*var(--discern-f1))*(1 - var(--discern-f-p)) + (.08 - .008*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-color-avatar-fill-end: oklch(round(((.936 - .076*var(--discern-f1))*(1 - var(--discern-f-p)) + (.4 + .0312*var(--discern-f0))*var(--discern-f-p)),.0001) round(clamp(0,(round(((.0351 + .0149*var(--discern-f1))*(1 - var(--discern-f-p)) + (.105 - .0068*var(--discern-f0))*var(--discern-f-p)),.0001)*var(--discern-emphasis)),.28),.0001) var(--discern-accent-hue) / 1); --discern-shadow-card: 2px 2px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.04 + (.02*var(--discern-f8))) + (.02*var(--discern-f3))) + (.02*var(--discern-f5))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); --discern-shadow-window: 4px 5px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.06 + (.03*var(--discern-f8))) + (.03*var(--discern-f3))) + (.04*var(--discern-f5))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); --discern-shadow-pop: 6px 6px 0 color-mix(in oklab, var(--discern-shadow-color) calc(round(clamp(0,(round((((.12 + (.04*var(--discern-f8))) + (.06*var(--discern-f3))) + (.06*var(--discern-f5))),.0001)*var(--discern-structure)),1),.0001) * 100%), transparent); } } } @layer discern.foundation { :where([data-discern-root], [data-discern-root] *) { box-sizing: border-box; } :where([data-discern-root]) { min-width: 0; background: var(--discern-color-canvas); color: var(--discern-color-ink); font-family: var(--discern-font-body); font-size: var(--discern-font-size-md); line-height: var(--discern-leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } :where(html[data-discern-root] body) { margin: 0; } :where([data-discern-root]) ::selection { background: var(--discern-color-accent-200); color: var(--discern-color-ink); } :where([data-discern-root]) :where(h1, h2, h3, h4, h5, h6) { margin-block: 0 var(--discern-rhythm-related); color: var(--discern-color-ink); font-family: var(--discern-font-display); font-weight: var(--discern-font-weight-display); line-height: var(--discern-leading-tight); letter-spacing: -0.014em; text-wrap: pretty; } :where([data-discern-root]) h1 { font-size: var(--discern-font-size-display-lg); } :where([data-discern-root]) h2 { font-size: var(--discern-font-size-display-md); } :where([data-discern-root]) h3 { font-size: var(--discern-font-size-display-sm); } :where([data-discern-root]) :where(h4, h5, h6) { font-size: var(--discern-font-size-card-title); line-height: var(--discern-leading-snug); } :where([data-discern-root]) p { margin-block: 0 var(--discern-space-4); } :where([data-discern-root]) a { color: var(--discern-color-accent-600); } :where([data-discern-root]) :where(button, input, select, textarea) { font: inherit; } :where([data-discern-root]) :where(a, button, summary) { transition-property: background-color, border-color, box-shadow, color, transform; transition-duration: var(--discern-duration-fast); transition-timing-function: var(--discern-ease-out); } :where([data-discern-root]) :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--discern-color-accent-500); outline-offset: 2px; } :where([data-discern-root]) :where([role="group"], [role="region"])[tabindex="0"]:focus-visible { outline: 2px solid var(--discern-color-accent-500); outline-offset: -2px; } } @media (prefers-reduced-motion: reduce) { :where([data-discern-root]) *, :where([data-discern-root]) *::before, :where([data-discern-root]) *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (forced-colors: active) { :where([data-discern-root]) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px !important; } } @layer discern.utilities { .discern-container { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-measure { max-width: var(--discern-measure); } .discern-accent { color: var(--discern-color-accent-600); color: light-dark(var(--discern-color-accent-600), var(--discern-color-accent-500)); font-style: italic; } .discern-mono { font-family: var(--discern-font-mono); } .discern-dotted-underline { color: inherit; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in oklab, currentColor 48%, transparent); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; text-decoration-skip-ink: auto; cursor: help; } .discern-dotted-underline:hover, .discern-dotted-underline:focus-visible { text-decoration-style: solid; text-decoration-color: currentColor; } button.discern-dotted-underline { padding: 0; border: 0; background: transparent; font: inherit; } .discern-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .discern-dot-grid { background-image: radial-gradient(color-mix(in oklab, var(--discern-color-ink) 16%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; } .discern-hatch { background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--discern-color-stripe) 5px 6px); } .discern-grain-wash { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(110% 72% at 50% -8%, color-mix(in oklab, var(--discern-color-accent-300) 85%, transparent) 0%, transparent 62%), linear-gradient(to bottom, color-mix(in oklab, var(--discern-color-accent-200) 90%, var(--discern-color-canvas)) 0%, var(--discern-color-canvas) 82%); } .discern-grain-wash > * { position: relative; } .discern-reveal { animation: discern-reveal-in var(--discern-duration-reveal) var(--discern-ease-out) both; } [data-discern-emphasis="comment"] { color: oklch(from currentColor l c h / 0.55); } [data-discern-emphasis="punctuation"] { color: oklch(from currentColor l c h / 0.4); } [data-discern-emphasis="literal"] { color: var(--discern-code-literal, var(--discern-color-accent-700)); } @keyframes discern-reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } } @layer discern.components { .discern-icon { display: inline-grid; flex: none; place-items: center; align-content: center; inline-size: 1em; block-size: 1em; color: inherit; line-height: 1; vertical-align: -0.125em; } .discern-icon > :where(svg, img) { display: block; max-inline-size: 100%; max-block-size: 100%; } .discern-icon--contain > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; } .discern-icon--relief { container: discern-icon / inline-size; } @container discern-icon (min-width: 2.5rem) { .discern-icon--relief:where(.discern-icon--contain) > :where(svg, img) { filter: drop-shadow(0 0.0375rem 0 var(--discern-color-relief-shadow)) drop-shadow(0 -0.025rem 0 var(--discern-color-material-highlight)) drop-shadow(0 0.125rem 0.09375rem var(--discern-color-material-shade)); } } .discern-icon--busy > svg { animation: discern-icon-busy calc(var(--discern-duration-reveal) * 4) linear infinite; } @keyframes discern-icon-busy { to { transform: rotate(1turn); } } @media (prefers-reduced-motion: reduce) { .discern-icon--busy > svg { animation: none; } } @media (forced-colors: active) { .discern-icon--relief > :where(svg, img) { filter: none; } } } @layer discern.components { .discern-button { --discern-button-padding-inline: var(--discern-space-5); --discern-button-fill: var(--discern-color-action); --discern-button-fill-hover: color-mix(in oklab, var(--discern-color-action) 88%, var(--discern-color-on-action)); --discern-color-button-edge: var(--discern-color-action-edge); --discern-button-text: var(--discern-color-on-action); --discern-shadow-button: 0 calc(var(--discern-space-1) / 2) 0 var(--discern-color-action-shadow); --discern-shadow-button-pressed: 0 0 0 var(--discern-color-action-shadow); position: relative; display: inline-flex; max-inline-size: 100%; min-inline-size: 0; align-items: center; justify-content: center; gap: var(--discern-space-2); min-block-size: var(--discern-control-size-md); padding: var(--discern-space-1) var(--discern-button-padding-inline); border: 1px solid var(--discern-color-button-edge); border-radius: var(--discern-radius-md); background: var(--discern-button-fill); box-shadow: var(--discern-shadow-button); color: var(--discern-button-text); cursor: pointer; font-family: var(--discern-font-ui); font-size: var(--discern-font-size-sm); font-weight: 600; line-height: var(--discern-leading-snug); text-decoration: none; transition-property: background, box-shadow, transform; transition-duration: var(--discern-duration-fast); } .discern-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--discern-button-fill-hover); } .discern-button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(calc(var(--discern-space-1) / 2)); box-shadow: var(--discern-shadow-button-pressed); } .discern-button:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: var(--discern-space-1); } .discern-button--secondary { --discern-button-fill: var(--discern-color-surface); --discern-button-fill-hover: color-mix(in oklab, var(--discern-color-accent-100) 55%, var(--discern-color-surface)); --discern-color-button-edge: var(--discern-color-neutral-edge); --discern-button-text: var(--discern-color-ink); --discern-shadow-button: none; --discern-shadow-button-pressed: none; } .discern-button--ghost { --discern-button-fill: transparent; --discern-button-fill-hover: color-mix(in oklab, var(--discern-color-accent-100) 70%, transparent); --discern-color-button-edge: color-mix(in oklab, var(--discern-color-border) 0%, transparent); --discern-shadow-button: none; --discern-shadow-button-pressed: none; --discern-button-text: var(--discern-color-accent-600); } .discern-button--danger { --discern-button-fill: var(--discern-color-danger-soft); --discern-button-fill-hover: color-mix(in oklab, var(--discern-color-danger-soft) 78%, var(--discern-color-danger)); --discern-color-button-edge: var(--discern-color-danger); --discern-shadow-button: none; --discern-shadow-button-pressed: none; --discern-button-text: var(--discern-color-danger); } .discern-button--sm { min-block-size: var(--discern-control-size-sm); --discern-button-padding-inline: var(--discern-space-3); font-size: var(--discern-font-size-xs); } .discern-button--lg { min-block-size: var(--discern-control-size-lg); --discern-button-padding-inline: var(--discern-space-6); font-size: 1.0625rem; } .discern-button__label { min-inline-size: 0; overflow-wrap: anywhere; text-align: center; } .discern-button__icon { flex: none; display: inline-grid; place-items: center; align-content: center; inline-size: 1em; block-size: 1em; } .discern-button__icon > :where(svg, img) { max-inline-size: 100%; max-block-size: 100%; } .discern-button:is(:disabled, [aria-disabled="true"]) { border-style: dashed; border-color: var(--discern-color-border-strong); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-muted); cursor: not-allowed; opacity: 1; transform: none; box-shadow: none; } .discern-button[aria-busy="true"] { --discern-button-busy-size: min(0.625em, calc(var(--discern-button-padding-inline) * 0.75)); cursor: progress; } .discern-button__busy { position: absolute; inset-block-start: 50%; inset-inline-start: calc((var(--discern-button-padding-inline) - var(--discern-button-busy-size)) / 2); transform: translateY(-50%); } .discern-button[aria-busy="true"]:has(> .discern-button__icon:first-child) { --discern-button-busy-size: 1em; } .discern-button[aria-busy="true"] > .discern-button__icon:first-child { visibility: hidden; } .discern-button:has(> .discern-button__icon:first-child) > .discern-button__busy { inset-inline-start: var(--discern-button-padding-inline); } @media (forced-colors: active) { .discern-button:is(:disabled, [aria-disabled="true"]) { color: GrayText; } } } @layer discern.components { .discern-icon-button { --discern-icon-button-icon-size: 1.125rem; position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--discern-control-size-md); block-size: var(--discern-control-size-md); padding: 0; border: 1px solid color-mix(in oklab, var(--discern-color-border) 0%, transparent); border-radius: var(--discern-radius-md); background: transparent; color: var(--discern-color-ink-muted); cursor: pointer; } .discern-icon-button:hover:not(:disabled) { background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); } .discern-icon-button:active:not(:disabled) { border-color: var(--discern-color-accent-500); background: var(--discern-color-accent-100); transform: translateY(0.0625rem); } .discern-icon-button:disabled { border-color: var(--discern-color-border-strong); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-muted); border-style: dashed; cursor: not-allowed; } .discern-icon-button--outline:not(:disabled) { border-color: var(--discern-color-border-strong); background: var(--discern-color-surface); } .discern-icon-button--sm { --discern-icon-button-icon-size: 0.9375rem; inline-size: var(--discern-control-size-sm); block-size: var(--discern-control-size-sm); } .discern-icon-button--lg { --discern-icon-button-icon-size: 1.3125rem; inline-size: var(--discern-control-size-lg); block-size: var(--discern-control-size-lg); } .discern-icon-button > span { display: grid; place-items: center; align-content: center; inline-size: var(--discern-icon-button-icon-size); block-size: var(--discern-icon-button-icon-size); } .discern-icon-button > span > :where(svg, img) { max-inline-size: 100%; max-block-size: 100%; } .discern-icon-button[aria-busy="true"] { cursor: progress; } .discern-icon-button[aria-busy="true"] > .discern-icon-button__glyph { visibility: hidden; } .discern-icon-button > .discern-icon-button__busy { position: absolute; } @media (forced-colors: active) { .discern-icon-button:disabled { color: GrayText; } } } @layer discern.components { .discern-theme-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-sm); background: var(--discern-color-surface); color: var(--discern-color-ink-muted); cursor: pointer; } .discern-theme-toggle--quiet { inline-size: 1.75rem; block-size: 1.75rem; border-color: color-mix(in oklab, var(--discern-color-border) 0%, transparent); background: transparent; } .discern-theme-toggle:hover:not(:disabled) { border-color: var(--discern-color-accent-500); color: var(--discern-color-ink); } .discern-theme-toggle--quiet:hover:not(:disabled) { border-color: color-mix(in oklab, var(--discern-color-border) 0%, transparent); } .discern-theme-toggle:active:not(:disabled) { background: var(--discern-color-accent-100); transform: translateY(0.0625rem); } .discern-theme-toggle:focus-visible { color: var(--discern-color-ink); } .discern-theme-toggle[inert] { border-color: var(--discern-color-border); color: var(--discern-color-ink-faint); } .discern-theme-toggle:disabled { border-color: var(--discern-color-border); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-faint); cursor: not-allowed; } .discern-theme-toggle--quiet:disabled { border-color: color-mix(in oklab, var(--discern-color-border) 0%, transparent); background: transparent; } .discern-theme-toggle__glyph:not([hidden]) { display: inline-flex; align-items: center; } } @layer discern.components { .discern-logo { --discern-logo-size: var(--discern-font-size-display-sm); display: inline-flex; flex: none; align-items: center; justify-content: center; max-inline-size: 100%; block-size: var(--discern-logo-size); color: inherit; font-size: var(--discern-logo-size); font-style: normal; line-height: 1; vertical-align: middle; } .discern-logo--sm { --discern-logo-size: var(--discern-font-size-sm); } .discern-logo--lg { --discern-logo-size: var(--discern-font-size-display-md); } .discern-logo--xl { --discern-logo-size: var(--discern-font-size-display-lg); } .discern-logo--natural { min-inline-size: min-content; } .discern-logo--square { inline-size: var(--discern-logo-size); overflow: hidden; } .discern-logo--tile { min-inline-size: var(--discern-logo-size); padding-inline: var(--discern-space-2); border: 1px solid var(--discern-color-accent-600); border-radius: var(--discern-radius-sm); background: var(--discern-color-accent-200); box-shadow: var(--discern-shadow-card); color: var(--discern-color-accent-800); font-size: calc(var(--discern-logo-size) * 0.58); font-weight: var(--discern-font-weight-strong); } .discern-logo--tile.discern-logo--square { padding-inline: var(--discern-space-1); } .discern-logo > :where(img, svg) { display: block; inline-size: auto; max-inline-size: 100%; block-size: 100%; object-fit: contain; } } @layer discern.components { .discern-brand { display: inline-flex; align-items: center; gap: var(--discern-space-3); max-inline-size: 100%; color: inherit; line-height: 1; text-decoration: none; } .discern-brand--sm { font-size: var(--discern-font-size-xs); } .discern-brand--md { font-size: var(--discern-font-size-sm); } .discern-brand--lg { font-size: var(--discern-font-size-lg); } .discern-brand__mark { flex: none; } .discern-brand__mark.discern-logo--plain { font-size: 1.15em; } .discern-brand__copy { display: grid; min-inline-size: 0; gap: var(--discern-space-1); } .discern-brand__name { overflow: hidden; font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-tight); text-overflow: ellipsis; white-space: nowrap; } .discern-brand--ui .discern-brand__name, .discern-brand__tagline { font-family: var(--discern-font-ui); } .discern-brand--display .discern-brand__name { font-family: var(--discern-font-display); font-weight: var(--discern-font-weight-display); } .discern-brand--mono .discern-brand__name { font-family: var(--discern-font-mono); } .discern-brand__tagline { overflow: hidden; color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-snug); text-overflow: ellipsis; white-space: nowrap; } } @layer discern.components { .discern-stack { display: flex; flex-direction: column; gap: var(--discern-stack-gap, var(--discern-space-4)); } .discern-stack > * { margin-block: 0; } .discern-stack--start { align-items: flex-start; } .discern-stack--center { align-items: center; } .discern-stack--end { align-items: flex-end; } .discern-stack--stretch { align-items: stretch; } } @layer discern.components { .discern-cluster { display: flex; flex-wrap: wrap; gap: var(--discern-cluster-gap, var(--discern-space-3)); } .discern-cluster--align-start { align-items: flex-start; } .discern-cluster--align-center { align-items: center; } .discern-cluster--align-end { align-items: flex-end; } .discern-cluster--align-baseline { align-items: baseline; } .discern-cluster--align-stretch { align-items: stretch; } .discern-cluster--justify-start { justify-content: flex-start; } .discern-cluster--justify-center { justify-content: center; } .discern-cluster--justify-end { justify-content: flex-end; } .discern-cluster--justify-between { justify-content: space-between; } } @layer discern.components { .discern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--discern-grid-min, 14rem)), 1fr)); gap: var(--discern-grid-gap, var(--discern-space-5)); } } @layer discern.components { .discern-badge { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; --discern-badge-bg: var(--discern-color-accent-100); --discern-badge-text: var(--discern-color-accent-800); display: inline-flex; align-items: center; gap: calc(var(--discern-space-1) * 1.5); min-block-size: 1.5rem; padding-inline: calc(var(--discern-space-1) * 2.25); border: 1px solid color-mix(in oklab, var(--discern-color-accent-400) 50%, transparent); border-radius: var(--discern-radius-pill); background: var(--discern-badge-bg); color: var(--discern-badge-text); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: 600; line-height: 1.2; } .discern-badge__dot { flex: none; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: currentColor; } .discern-badge--neutral { --discern-badge-bg: var(--discern-color-surface-sunken); --discern-badge-text: var(--discern-color-ink-muted); border-color: var(--discern-color-border); } .discern-badge--success { --discern-badge-bg: var(--discern-color-success-soft); --discern-badge-text: var(--discern-color-success-deep); border-color: color-mix(in oklab, var(--discern-color-success) 50%, transparent); } .discern-badge--warning { --discern-badge-bg: var(--discern-color-warning-soft); --discern-badge-text: var(--discern-color-warning-deep); border-color: color-mix(in oklab, var(--discern-color-warning) 42%, transparent); } .discern-badge--danger { --discern-badge-bg: var(--discern-color-danger-soft); --discern-badge-text: var(--discern-color-danger); border-color: color-mix(in oklab, var(--discern-color-danger) 42%, transparent); } } @layer discern.components { .discern-card { min-inline-size: 0; overflow-wrap: anywhere; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-surface); color: var(--discern-color-ink); } .discern-card :where(h1, h2, h3, h4, h5, h6) { font-family: var(--discern-font-ui); font-size: var(--discern-font-size-card-title); font-weight: var(--discern-font-weight-strong); letter-spacing: normal; line-height: var(--discern-leading-snug); } .discern-card > :first-child { margin-block-start: 0; } .discern-card > :last-child { margin-block-end: 0; } .discern-card--raised { box-shadow: var(--discern-shadow-card); } .discern-card--shaded { background-image: linear-gradient(155deg, var(--discern-color-material-highlight), transparent 28%, var(--discern-color-material-shade)); } .discern-card--shimmer { position: relative; isolation: isolate; } .discern-card--shimmer::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(112deg, transparent 30%, var(--discern-color-ambient) 50%, transparent 70%); background-size: 300% 100%; opacity: 0; animation: discern-card-shimmer var(--discern-duration-reveal) var(--discern-ease-out); } @keyframes discern-card-shimmer { 0% { background-position: 100% 0; opacity: 0; } 28% { opacity: 0.6; } 100% { background-position: 0% 0; opacity: 0; } } .discern-card :where(.discern-card) { border: 0; box-shadow: none; } .discern-card--dots { background: var(--discern-color-surface-sunken); background-image: radial-gradient(var(--discern-color-border-strong) 0.05rem, transparent 0.05rem); background-size: 0.625rem 0.625rem; } .discern-card--pad-none { padding: 0; } .discern-card--pad-sm { padding: var(--discern-space-4); } .discern-card--pad-md { padding: var(--discern-rhythm-group); } .discern-card--pad-lg { padding: var(--discern-space-8); } @media (prefers-reduced-motion: reduce), (forced-colors: active) { .discern-card--shimmer::after { display: none; } } } @layer discern.components { .discern-divider { --discern-divider-ground: var(--discern-color-canvas); display: flex; align-items: center; justify-content: center; gap: var(--discern-space-3); min-block-size: 1.5rem; } .discern-divider::before, .discern-divider::after { flex: 1; min-inline-size: 0; block-size: 1px; background: linear-gradient(to right, transparent, var(--discern-color-border-strong)); content: ""; } .discern-divider::after { background: linear-gradient(to left, transparent, var(--discern-color-border-strong)); } .discern-divider--plain { gap: 0; } .discern-divider--plain::before { background: var(--discern-color-border); } .discern-divider--plain::after { content: none; } .discern-divider__label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--discern-space-2); padding-inline: var(--discern-space-1); background: var(--discern-divider-ground); color: var(--discern-color-ink-faint); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: 600; line-height: 1.2; } .discern-divider__label::before { inline-size: 0.375rem; block-size: 0.375rem; border: 1px solid var(--discern-color-accent-500); background: var(--discern-color-accent-100); content: ""; transform: rotate(45deg); } .discern-divider--surface { --discern-divider-ground: var(--discern-color-surface); } } @layer discern.components { .discern-heading__accent { color: var(--discern-color-accent-ink); font-style: italic; } } @layer discern.components { .discern-kicker { display: inline-flex; align-items: baseline; gap: var(--discern-space-2); color: var(--discern-color-ink-faint); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: 600; letter-spacing: 0.11em; line-height: 1.4; text-transform: uppercase; } .discern-kicker__index { color: var(--discern-color-accent-ink); letter-spacing: 0.11em; } } @layer discern.components { .discern-tag { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: var(--discern-space-2); min-block-size: 1.5625rem; padding-inline: var(--discern-space-2); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-xs); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); line-height: 1.3; } .discern-tag__remove { flex: none; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; margin-inline-end: calc(var(--discern-space-1) * -1.25); padding: 0; border: 0; border-radius: var(--discern-radius-xs); background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; } .discern-tag__remove:hover, .discern-tag__remove:focus-visible { background: var(--discern-color-border); color: var(--discern-color-ink); } .discern-tag__remove:active { background: var(--discern-color-border-strong); color: var(--discern-color-ink); transform: translateY(1px); } } @layer discern.components { .discern-window { overflow: hidden; margin: 0; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-window); } .discern-window__bar { position: relative; display: flex; align-items: center; gap: calc(var(--discern-space-1) * 1.5); min-block-size: 2.375rem; padding-inline: calc(var(--discern-space-1) * 3.25); border-block-end: 1px solid var(--discern-color-border); background: color-mix(in oklab, var(--discern-color-canvas) 55%, var(--discern-color-surface)); } .discern-window__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--discern-color-stripe); } .discern-window__dots { display: flex; gap: calc(var(--discern-space-1) * 1.5); } .discern-window__title { position: absolute; inset-inline: calc(var(--discern-space-1) * 17.5); overflow: hidden; color: var(--discern-color-ink-faint); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); letter-spacing: 0.05em; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .discern-window__body { min-block-size: 5rem; } .discern-window__actions { display: inline-flex; align-items: center; margin-inline-start: auto; } .discern-window--showcase { border-color: color-mix(in oklab, var(--discern-color-border-strong) 85%, transparent); border-radius: clamp(1.25rem, 2.8vw, 2rem); box-shadow: var(--discern-shadow-window); } .discern-window--showcase .discern-window__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--discern-space-4); min-block-size: 4rem; padding-inline: clamp(var(--discern-space-4), 2.6vw, var(--discern-space-8)); background: color-mix(in oklab, var(--discern-color-surface-sunken) 56%, var(--discern-color-surface)); } .discern-window--showcase .discern-window__dot { inline-size: 0.62rem; block-size: 0.62rem; } .discern-window--showcase .discern-window__dot:nth-child(1) { background: color-mix(in oklab, var(--discern-color-danger) 65%, var(--discern-color-border)); } .discern-window--showcase .discern-window__dot:nth-child(2) { background: color-mix(in oklab, var(--discern-color-warning) 65%, var(--discern-color-border)); } .discern-window--showcase .discern-window__dot:nth-child(3) { background: color-mix(in oklab, var(--discern-color-success) 65%, var(--discern-color-border)); } .discern-window--showcase .discern-window__title { position: static; grid-column: 2; min-inline-size: 0; max-inline-size: 100%; justify-self: stretch; } .discern-window--showcase .discern-window__actions { grid-column: 3; justify-self: end; margin-inline-start: 0; } } @layer discern.components { .discern-table { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; font-family: var(--discern-font-ui); scrollbar-width: thin; } .discern-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--discern-font-size-sm); } .discern-table caption { margin-block-end: var(--discern-space-2); color: var(--discern-color-ink); font-weight: var(--discern-font-weight-strong); text-align: start; } .discern-table th, .discern-table td { padding: var(--discern-space-3) var(--discern-space-4); border-block-end: 1px solid var(--discern-color-border); overflow-wrap: normal; text-align: start; vertical-align: top; word-break: normal; } .discern-table thead th { border-block-end: 1px solid var(--discern-color-border-strong); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.08em; text-transform: uppercase; } .discern-table :where(th, td)[data-discern-table-align="center"] { text-align: center; } .discern-table :where(th, td)[data-discern-table-align="end"] { text-align: end; } .discern-table :where(th, td) a { display: inline-flex; align-items: center; min-block-size: 1.5rem; } .discern-table--striped tbody tr:nth-child(odd) { background: var(--discern-color-stripe); } .discern-table--numeric td:last-child, .discern-table--numeric th:last-child { font-variant-numeric: tabular-nums; text-align: end; } } @layer discern.components { .discern-backdrop { --discern-backdrop-beat: 2.4s; --discern-backdrop-ease-drift: cubic-bezier(0.37, 0, 0.63, 1); --discern-backdrop-ease-settle: cubic-bezier(0.18, 0.82, 0.22, 1); --discern-backdrop-hairline: 0.75; --discern-backdrop-line: 1.25; --discern-backdrop-gain: calc(var(--discern-backdrop-presence, 1) * var(--discern-backdrop-theme-gain)); --discern-backdrop-veil-1: calc(0.05 * var(--discern-backdrop-gain)); --discern-backdrop-veil-2: calc(0.09 * var(--discern-backdrop-gain)); --discern-backdrop-veil-3: calc(0.16 * var(--discern-backdrop-gain)); --discern-backdrop-veil-4: calc(0.26 * var(--discern-backdrop-gain)); --discern-backdrop-ink: var(--discern-color-ink); --discern-backdrop-guide: var(--discern-color-border-strong); --discern-backdrop-accent: var(--discern-color-accent-600); position: absolute; z-index: 0; inset: 0; overflow: hidden; isolation: isolate; contain: paint; color: var(--discern-backdrop-ink); pointer-events: none; } .discern-backdrop__plate { display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; } .discern-backdrop--still *, .discern-backdrop--still::before, .discern-backdrop--still::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .discern-backdrop *, .discern-backdrop::before, .discern-backdrop::after { animation: none !important; transition: none !important; } } @media (forced-colors: active) { .discern-backdrop { display: none; } } } @layer discern.components { .discern-approach-backdrop { color: var(--discern-backdrop-ink); } .discern-approach-backdrop__plate { mask-image: linear-gradient( 90deg, transparent 0 14%, color-mix(in srgb, var(--discern-color-ink) 55%, transparent) 42%, var(--discern-color-ink) 68% 100% ); } .discern-approach-backdrop__sightline { fill: none; stroke: var(--discern-backdrop-guide); stroke-width: var(--discern-backdrop-hairline); opacity: var(--discern-backdrop-veil-2); } .discern-approach-backdrop__ring { fill: none; stroke: currentColor; stroke-width: var(--discern-backdrop-hairline); opacity: var(--discern-backdrop-veil-3); } /* The travelling accent. Only opacity animates, so the ring beneath it * stays exactly where it was drawn. */ .discern-approach-backdrop__attend { fill: none; stroke: var(--discern-backdrop-accent); stroke-width: var(--discern-backdrop-line); opacity: 0; animation: discern-approach-backdrop-attend calc(var(--discern-backdrop-beat) * 45) var(--discern-backdrop-ease-drift) 1 both; animation-delay: var(--discern-approach-backdrop-offset, 0s); } .discern-approach-backdrop__station line { stroke: var(--discern-backdrop-accent); stroke-width: var(--discern-backdrop-line); opacity: var(--discern-backdrop-veil-4); } /* One ring's turn: in over two beats, held for four, out over two, then * dark for the rest of the phrase while the other eight take theirs. */ @keyframes discern-approach-backdrop-attend { 0%, 14%, 99%, 100% { opacity: 0; } 4%, 9% { opacity: var(--discern-backdrop-veil-4); } } } @layer discern.components { .discern-command { overflow: hidden; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; margin: 0; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); color: var(--discern-color-ink); } .discern-command__context, .discern-command__failure-note { font-family: var(--discern-font-ui); } .discern-command__context { display: flex; flex-wrap: wrap; gap: var(--discern-space-2) var(--discern-space-5); padding: var(--discern-space-3) var(--discern-space-4); border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-snug); } .discern-command__context-item { display: inline-flex; gap: var(--discern-space-2); min-inline-size: 0; } .discern-command__context-label { flex: none; color: var(--discern-color-ink-faint); font-weight: var(--discern-font-weight-strong); } .discern-command__context code { min-inline-size: 0; color: var(--discern-color-ink); font-family: var(--discern-font-mono); overflow-wrap: anywhere; white-space: pre-wrap; } .discern-command__execution { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--discern-space-3); align-items: center; padding: var(--discern-space-4); } .discern-command__text { min-inline-size: 0; margin: 0; overflow-x: auto; font-family: var(--discern-font-mono); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-body); white-space: pre; } .discern-command__text code { display: block; inline-size: max-content; min-inline-size: 100%; color: inherit; font: inherit; } .discern-command__details { display: grid; gap: var(--discern-space-3); padding: 0 var(--discern-space-4) var(--discern-space-4); } .discern-command__explanation { color: var(--discern-color-ink-muted); font-family: var(--discern-font-body); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-command__failure-note { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--discern-space-3); padding: var(--discern-space-3) var(--discern-space-4); border-inline-start: 0.125rem solid var(--discern-color-warning); background: var(--discern-color-warning-soft); color: var(--discern-color-warning-deep); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-body); } .discern-command__failure-note strong { font-weight: var(--discern-font-weight-strong); } } @layer discern.components { .discern-expected-result { display: grid; gap: var(--discern-space-2); padding: var(--discern-space-3) var(--discern-space-4); border-inline-start: 0.125rem solid var(--discern-color-border-strong); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); } .discern-expected-result__label { color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-expected-result__output { margin: 0; overflow-x: auto; color: var(--discern-color-ink); font-family: var(--discern-font-mono); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-body); white-space: pre; } .discern-expected-result__output code { color: inherit; font: inherit; } .discern-expected-result__state { color: var(--discern-color-ink); font-family: var(--discern-font-body); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } } @layer discern.components { .discern-skip-link { position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem; overflow: hidden; background: var(--discern-color-surface); clip-path: inset(50%); white-space: nowrap; } .discern-skip-link:focus-visible { position: fixed; inset-block-start: var(--discern-space-4); inset-inline-start: var(--discern-space-4); z-index: 40; inline-size: auto; block-size: auto; padding: var(--discern-space-3) var(--discern-space-5); border: 1px solid var(--discern-color-accent-500); border-radius: var(--discern-radius-sm); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-pop); clip-path: none; color: var(--discern-color-ink); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-sm); text-decoration: none; } } @layer discern.components { .discern-copy-button { display: inline-flex; align-items: center; gap: var(--discern-space-2); min-block-size: 1.5rem; padding: var(--discern-space-1) var(--discern-space-3); border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-sm); background: var(--discern-color-surface); color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-tight); cursor: pointer; } .discern-copy-button:hover { border-color: var(--discern-color-accent-500); color: var(--discern-color-ink); } .discern-copy-button:focus-visible { color: var(--discern-color-ink); } .discern-copy-button:active:not(:disabled) { background: var(--discern-color-accent-100); transform: translateY(0.0625rem); } .discern-copy-button:disabled, .discern-copy-button[inert] { border-color: var(--discern-color-border); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-faint); cursor: not-allowed; } .discern-copy-button__icon:not([hidden]) { display: inline-flex; align-items: center; } .discern-copy-button[data-discern-copied] { border-color: var(--discern-color-success); background: var(--discern-color-success-soft); color: var(--discern-color-success-deep); } } @layer discern.components { .discern-marketing-section { --discern-marketing-section-max: var(--discern-page-max); --discern-marketing-section-space: var(--discern-section-space); position: relative; padding-block: var(--discern-marketing-section-space); color: var(--discern-color-ink); } .discern-marketing-section--space-spacious { --discern-marketing-section-space: clamp(6rem, 11vw, 10rem); } .discern-marketing-section--space-compact { --discern-marketing-section-space: clamp(calc(var(--discern-space-12) + var(--discern-space-2)), 7vw, var(--discern-space-20)); } .discern-marketing-section--frame-wide { --discern-marketing-section-max: 86rem; } .discern-marketing-section--canvas { background: var(--discern-color-canvas); } .discern-marketing-section--surface { background: var(--discern-color-surface); } .discern-marketing-section--sunken { background: var(--discern-color-surface-sunken); } .discern-marketing-section--inherit { color: inherit; } .discern-marketing-section--contrast { --discern-color-canvas: var(--discern-color-inverse-surface); --discern-color-surface: color-mix(in oklab, var(--discern-color-inverse-ink) 7%, var(--discern-color-inverse-surface)); --discern-color-surface-sunken: color-mix(in oklab, var(--discern-color-inverse-ink) 3%, var(--discern-color-inverse-surface)); --discern-color-ink: var(--discern-color-inverse-ink); --discern-color-ink-muted: color-mix(in oklab, var(--discern-color-inverse-ink) 76%, transparent); --discern-color-ink-faint: color-mix(in oklab, var(--discern-color-inverse-ink) 62%, transparent); --discern-color-border: color-mix(in oklab, var(--discern-color-inverse-ink) 18%, transparent); --discern-color-border-strong: color-mix(in oklab, var(--discern-color-inverse-ink) 30%, transparent); --discern-marketing-accent-ink: var(--discern-color-inverse-ink); background: var(--discern-color-canvas); } .discern-marketing-section--contrast :focus-visible { outline-color: var(--discern-color-inverse-ink); } .discern-marketing-section__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-marketing-section-max)); margin-inline: auto; } @media (max-width: 43.75rem) { .discern-marketing-section--space-spacious { --discern-marketing-section-space: clamp(4.75rem, 18vw, 7rem); } .discern-marketing-section__inner { width: min(100% - 2 * var(--discern-space-4), var(--discern-marketing-section-max)); } } } @layer discern.components { .discern-site-header { container-type: inline-size; z-index: 30; border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-surface); } .discern-site-header--sticky { position: sticky; top: 0; } .discern-site-header--campaign { z-index: 50; border-block-end-color: var(--discern-color-border-strong); background: var(--discern-color-surface); } .discern-site-header__notice, .discern-site-header__brand--ui, .discern-site-header__nav a { font-family: var(--discern-font-ui); } .discern-site-header__notice { padding: var(--discern-space-2) var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-accent-100); color: var(--discern-color-accent-800); font-size: var(--discern-font-size-xs); text-align: center; } .discern-site-header__notice a { display: inline-flex; align-items: center; min-block-size: 1.5rem; color: inherit; font-weight: var(--discern-font-weight-strong); outline-width: 0.125rem; } .discern-site-header__inner { display: flex; align-items: center; gap: var(--discern-space-6); width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); min-height: 4.25rem; margin-inline: auto; } .discern-site-header--campaign .discern-site-header__inner { width: min(100% - 2 * var(--discern-space-6), 86rem); min-block-size: 4.25rem; } .discern-site-header__brand { display: inline-flex; flex: none; align-items: center; min-block-size: 1.5rem; gap: var(--discern-space-3); color: var(--discern-color-ink); font-size: 1.15rem; line-height: 1; text-decoration: none; } .discern-site-header__brand--ui { font-weight: var(--discern-font-weight-strong); } .discern-site-header__brand--display { font-family: var(--discern-font-display); font-weight: var(--discern-font-weight-display); } .discern-site-header__brand--mono { font-family: var(--discern-font-mono); font-weight: var(--discern-font-weight-strong); } .discern-site-header__brand--inherit { font-family: inherit; font-weight: inherit; } .discern-site-header__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; max-inline-size: 10rem; block-size: 2rem; color: inherit; font-style: normal; line-height: 1; } .discern-site-header__mark--tile { min-inline-size: 2rem; padding-inline: var(--discern-space-2); border: 1px solid var(--discern-color-accent-600); border-radius: var(--discern-radius-sm); background: var(--discern-color-accent-200); box-shadow: var(--discern-shadow-card); color: var(--discern-color-accent-800); } .discern-site-header__mark--plain { font-size: 1.15em; } .discern-site-header__mark--square { inline-size: 2rem; padding-inline: 0; overflow: hidden; } .discern-site-header__mark > :where(img, svg) { display: block; inline-size: auto; max-inline-size: 100%; block-size: 100%; object-fit: contain; } .discern-site-header__nav { display: flex; align-items: center; gap: var(--discern-space-6); margin-inline: auto 0; } .discern-site-header--campaign .discern-site-header__nav { gap: clamp(var(--discern-space-3), 2.2vw, var(--discern-space-6)); } .discern-site-header__nav a { display: inline-flex; align-items: center; min-block-size: 1.5rem; padding-block: var(--discern-space-2); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); text-decoration: none; } .discern-site-header--campaign .discern-site-header__nav a { font-size: var(--discern-font-size-sm); } .discern-site-header__nav a:is(:hover, :focus-visible, [aria-current]) { color: var(--discern-color-ink); } .discern-site-header__nav a[aria-current] { text-decoration-line: underline; text-decoration-color: var(--discern-color-accent-500); text-decoration-thickness: 0.125rem; text-underline-offset: 0.35em; } .discern-site-header__nav a[aria-current="true"] { text-decoration-style: dotted; text-decoration-color: var(--discern-color-ink-faint); } .discern-site-header__actions { display: flex; flex: none; align-items: center; gap: var(--discern-space-2); } @container (max-width: 45rem) { .discern-site-header__inner { flex-wrap: wrap; gap: var(--discern-space-3); padding-block: var(--discern-space-3); } .discern-site-header__nav { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-block-start: var(--discern-space-2); border-block-start: 1px solid var(--discern-color-border); scrollbar-width: none; } .discern-site-header__nav a { flex: none; } .discern-site-header__actions { margin-inline-start: auto; } .discern-site-header--campaign .discern-site-header__inner { width: min(100% - 2 * var(--discern-space-4), 86rem); } } @container (max-width: 30rem) { .discern-site-header--collapse-nav .discern-site-header__nav { display: none; } } } @layer discern.components { .discern-marketing-intro { --discern-marketing-intro-title-size: clamp(2rem, 4cqi, 2.75rem); --discern-marketing-intro-title-leading: var(--discern-leading-tight); --discern-marketing-intro-title-tracking: -0.055em; container: discern-marketing-intro / inline-size; inline-size: 100%; max-inline-size: 47rem; margin-block-end: clamp(var(--discern-space-8), 4cqi, var(--discern-space-10)); color: var(--discern-color-ink); } .discern-marketing-intro--editorial { --discern-marketing-intro-title-size: clamp(var(--discern-font-size-display-md), calc(1rem + 5cqi), calc(var(--discern-font-size-display-lg) * 2)); --discern-marketing-intro-title-leading: var(--discern-leading-tight); --discern-marketing-intro-title-tracking: -0.035em; } .discern-marketing-intro--center { margin-inline: auto; text-align: center; } .discern-marketing-intro--contrast { --discern-marketing-accent-ink: var(--discern-color-inverse-ink); color: var(--discern-color-inverse-ink); } .discern-marketing-intro__eyebrow { margin-block-end: var(--discern-space-4); color: var(--discern-marketing-accent-ink, var(--discern-color-accent-600)); } .discern-marketing-intro__title { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); min-inline-size: 0; overflow-wrap: anywhere; margin: 0; color: inherit; font-size: var(--discern-marketing-intro-title-size); line-height: var(--discern-marketing-intro-title-leading); letter-spacing: var(--discern-marketing-intro-title-tracking); text-wrap: balance; } .discern-marketing-intro__description { max-inline-size: 42rem; margin-block-start: var(--discern-space-6); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); line-height: var(--discern-leading-body); } .discern-marketing-intro--contrast .discern-marketing-intro__description { color: color-mix(in oklab, var(--discern-color-inverse-ink) 76%, transparent); } .discern-marketing-intro--center .discern-marketing-intro__description { margin-inline: auto; } .discern-marketing-intro__description > :last-child { margin-block-end: 0; } } @layer discern.components { .discern-hero-block { container: discern-hero-block / inline-size; position: relative; isolation: isolate; overflow: hidden; border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-canvas); } .discern-hero-block--sunken { background: var(--discern-color-surface-sunken); } .discern-hero-block--accent { background: radial-gradient(circle at 82% 12%, color-mix(in oklab, var(--discern-color-accent-400) 32%, transparent), transparent 34%), var(--discern-color-accent-100); } .discern-hero-block--atmospheric { border-block-end: 0; background: linear-gradient(118deg, transparent 12%, color-mix(in oklab, var(--discern-color-accent-200) 18%, transparent) 46%, transparent 72%), linear-gradient(242deg, transparent 18%, color-mix(in oklab, var(--discern-color-accent-300) 12%, transparent) 50%, transparent 76%), linear-gradient(180deg, var(--discern-color-canvas) 0%, color-mix(in oklab, var(--discern-color-surface-sunken) 55%, var(--discern-color-canvas)) 76%, var(--discern-color-canvas) 100%); } .discern-hero-block__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: clamp(var(--discern-space-12), 8cqi, calc(var(--discern-space-24) + var(--discern-space-4))); align-items: center; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); min-height: min(47.5rem, calc(100vh - 4.25rem)); margin-inline: auto; padding-block: clamp(var(--discern-space-20), 10cqi, calc(var(--discern-space-24) + var(--discern-space-10))); } .discern-hero-block__backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; } .discern-hero-block__content { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--discern-space-5); min-width: 0; } .discern-hero-block__eyebrow, .discern-hero-block__meta { font-family: var(--discern-font-ui); } .discern-hero-block__eyebrow { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-hero-block__title { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; min-inline-size: 0; max-width: 16ch; font-size: clamp(var(--discern-font-size-display-md), calc(1rem + 4cqi), var(--discern-font-size-display-lg)); text-wrap: balance; margin: 0; overflow-wrap: anywhere; } .discern-hero-block__description { max-width: 60ch; color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-hero-block__description > :last-child { margin-block-end: 0; } .discern-hero-block__actions { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); margin-block-start: var(--discern-space-2); } .discern-hero-block__meta { color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-hero-block__visual { min-width: 0; } :is(.discern-hero-block--centered, .discern-hero-block--without-visual) .discern-hero-block__inner { grid-template-columns: minmax(0, 48rem); justify-content: center; text-align: center; } :is(.discern-hero-block--centered, .discern-hero-block--without-visual) .discern-hero-block__content { justify-items: center; } :is(.discern-hero-block--centered, .discern-hero-block--without-visual) .discern-hero-block__title { max-width: 15ch; } .discern-hero-block--showcase .discern-hero-block__inner { grid-template-columns: minmax(0, 86rem); justify-content: center; gap: clamp(calc(var(--discern-space-16) + var(--discern-space-2)), 9cqi, calc(var(--discern-space-24) + var(--discern-space-8))); width: min(100% - 2 * var(--discern-space-6), 86rem); min-height: auto; padding-block: clamp(var(--discern-space-20), 9cqi, calc(var(--discern-space-24) + var(--discern-space-10) + var(--discern-space-1))) clamp(var(--discern-space-16), 8cqi, calc(var(--discern-space-24) + var(--discern-space-4))); text-align: center; } .discern-hero-block--showcase .discern-hero-block__content { justify-items: center; max-inline-size: 70rem; margin-inline: auto; } .discern-hero-block--showcase .discern-hero-block__eyebrow { display: inline-flex; align-items: center; gap: var(--discern-space-2); border: 1px solid color-mix(in oklab, var(--discern-color-accent-500) 28%, var(--discern-color-border)); border-radius: var(--discern-radius-pill); padding: var(--discern-space-2) var(--discern-space-4); background: color-mix(in oklab, var(--discern-color-accent-100) 45%, var(--discern-color-canvas)); box-shadow: var(--discern-shadow-card); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-hero-block--showcase .discern-hero-block__title { max-inline-size: 64rem; font-size: clamp(var(--discern-font-size-display-lg), calc(1rem + 7cqi), calc(var(--discern-font-size-display-lg) * 2.5)); line-height: var(--discern-leading-tight); letter-spacing: -0.045em; } .discern-hero-block--showcase .discern-hero-block__title em { color: var(--discern-color-accent-ink); font-style: inherit; } .discern-hero-block--showcase .discern-hero-block__description { max-inline-size: 52rem; font-size: clamp(1.15rem, 2cqi, 1.48rem); line-height: 1.62; text-wrap: pretty; } .discern-hero-block--showcase .discern-hero-block__actions { justify-content: center; margin-block-start: var(--discern-space-3); } .discern-hero-block--showcase .discern-hero-block__meta { display: grid; gap: var(--discern-space-2); max-inline-size: 58rem; color: var(--discern-color-ink-muted); } .discern-hero-block--showcase .discern-hero-block__meta code { color: var(--discern-color-ink); font-family: var(--discern-font-mono); font-size: var(--discern-font-size-sm); } .discern-hero-block--showcase .discern-hero-block__visual { width: min(100%, 82rem); margin-inline: auto; text-align: start; } .discern-hero-block--statement .discern-hero-block__inner { grid-template-columns: minmax(0, 1fr); gap: calc(var(--discern-space-12) + var(--discern-space-2)); min-height: auto; padding-block: clamp(calc(var(--discern-space-12) + var(--discern-space-2)), 7cqi, calc(var(--discern-space-20) + var(--discern-space-2))); text-align: start; } .discern-hero-block--statement .discern-hero-block__content { justify-items: start; } .discern-hero-block--statement .discern-hero-block__title { max-inline-size: 17ch; font-size: clamp(2.5rem, 6.3cqi, 4.75rem); line-height: 1.04; text-wrap: pretty; } .discern-hero-block--statement .discern-hero-block__description { max-inline-size: 48ch; } .discern-hero-block--statement .discern-hero-block__visual { width: 100%; margin: 0; border-block-start: 1px solid var(--discern-color-border); padding-block-start: calc(var(--discern-space-8) + var(--discern-space-2)); } @container discern-hero-block (max-width: 51.25rem) { .discern-hero-block__inner { grid-template-columns: 1fr; min-height: auto; } .discern-hero-block__visual { width: min(100%, 38rem); margin-inline: auto; } .discern-hero-block--showcase .discern-hero-block__inner { width: min(100% - 2 * var(--discern-space-4), 86rem); padding-block-start: calc(var(--discern-space-16) + var(--discern-space-2)); } .discern-hero-block--showcase .discern-hero-block__description { font-size: 1.08rem; } .discern-hero-block--showcase .discern-hero-block__actions { display: grid; width: 100%; } .discern-hero-block--showcase .discern-hero-block__actions > * { inline-size: 100%; } .discern-hero-block--showcase .discern-hero-block__visual { width: 100%; } .discern-hero-block--statement .discern-hero-block__visual { width: 100%; margin: 0; } } } @layer discern.components { .discern-logo-cloud { --discern-logo-cloud-mark-mask: none; container: discern-logo-cloud / inline-size; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; padding-block: var(--discern-space-10); } .discern-logo-cloud__label, .discern-logo-cloud__list li { font-family: var(--discern-font-ui); } .discern-logo-cloud__label { margin: 0 0 var(--discern-space-6); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); text-align: center; } .discern-logo-cloud--start .discern-logo-cloud__label { text-align: start; } .discern-logo-cloud__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; padding: 0; border-block: 1px solid var(--discern-color-border); list-style: none; } .discern-logo-cloud__list li { display: flex; align-items: center; justify-content: center; gap: var(--discern-space-2); min-height: 5rem; padding: var(--discern-space-4); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); text-align: center; } .discern-logo-cloud__list li + li { border-inline-start: 1px solid var(--discern-color-border); } .discern-logo-cloud__mark { position: relative; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; color: var(--discern-color-accent-700); } .discern-logo-cloud__mark > :where(img, svg) { display: block; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .discern-logo-cloud__mark--masked::after { position: absolute; inset: 0; background: var(--discern-color-brand-artwork-mask); content: ""; mask: var(--discern-logo-cloud-mark-mask) center / contain no-repeat; pointer-events: none; } .discern-logo-cloud__mark--masked { color: var(--discern-color-brand-artwork-ink); } .discern-logo-cloud__mark--masked > :where(img, svg) { opacity: var(--discern-brand-artwork-opacity); } .discern-logo-cloud--strip { width: min(100% - 2 * var(--discern-space-6), 86rem); padding-block: var(--discern-space-20); } .discern-logo-cloud--strip .discern-logo-cloud__label { margin-block-end: var(--discern-space-5); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.06em; text-transform: uppercase; } .discern-logo-cloud--strip .discern-logo-cloud__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(var(--discern-space-4), 4cqi, var(--discern-space-10)); border: 0; } .discern-logo-cloud--start.discern-logo-cloud--strip .discern-logo-cloud__list { justify-content: flex-start; } .discern-logo-cloud--strip .discern-logo-cloud__list li { min-height: 0; padding: 0; text-align: start; } .discern-logo-cloud--strip .discern-logo-cloud__list li + li { border: 0; } .discern-logo-cloud--strip .discern-logo-cloud__mark { inline-size: 2rem; block-size: 2rem; } @container discern-logo-cloud (max-width: 42.5rem) { .discern-logo-cloud__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .discern-logo-cloud__list li:nth-child(odd) { border-inline-start: 0; } .discern-logo-cloud__list li:nth-child(n + 3) { border-block-start: 1px solid var(--discern-color-border); } .discern-logo-cloud--strip .discern-logo-cloud__list { display: flex; } .discern-logo-cloud--strip .discern-logo-cloud__list li { min-inline-size: 7.5rem; border: 0; } } } @layer discern.components { .discern-audience-grid { container: discern-audience-grid / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-canvas); } .discern-audience-grid__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-audience-grid__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.45fr); gap: var(--discern-space-12); align-items: end; margin-block-end: var(--discern-space-10); padding-block-end: var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border); } .discern-audience-grid__eyebrow, .discern-audience-grid__item-eyebrow, .discern-audience-grid__item h3, .discern-audience-grid__meta, .discern-audience-grid__link { font-family: var(--discern-font-ui); } .discern-audience-grid__eyebrow, .discern-audience-grid__item-eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-audience-grid__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 15ch; margin: 0; } .discern-audience-grid__description, .discern-audience-grid__copy { color: var(--discern-color-ink-muted); } .discern-audience-grid__description > :last-child, .discern-audience-grid__copy > :last-child { margin-block-end: 0; } .discern-audience-grid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--discern-space-4); } .discern-audience-grid__item { display: flex; min-width: 0; overflow-wrap: anywhere; flex-direction: column; padding: var(--discern-space-8); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-card); } .discern-audience-grid__item--featured { border-color: var(--discern-color-accent-400); background: linear-gradient(150deg, var(--discern-color-accent-100), transparent 72%), var(--discern-color-surface); } .discern-audience-grid__topline { display: flex; align-items: center; justify-content: space-between; min-height: 2rem; margin-block-end: auto; color: var(--discern-color-ink-faint); } .discern-audience-grid__icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--discern-color-accent-600); } .discern-audience-grid__icon svg { inline-size: 100%; block-size: 100%; } .discern-audience-grid__index { font-size: var(--discern-font-size-xs); } .discern-audience-grid__item h3 { margin: var(--discern-space-6) 0 var(--discern-space-4); font-size: var(--discern-font-size-display-sm); font-weight: var(--discern-font-weight-strong); } .discern-audience-grid__meta { margin-block-start: var(--discern-space-5); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-audience-grid__link { align-self: flex-start; margin-block-start: var(--discern-space-6); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); text-underline-offset: 0.25em; } @container discern-audience-grid (max-width: 53.75rem) { .discern-audience-grid__header { grid-template-columns: 1fr; gap: var(--discern-space-5); } .discern-audience-grid__items { grid-template-columns: 1fr; } } } @layer discern.components { .discern-feature-bento { container: discern-feature-bento / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-surface-sunken); } .discern-feature-bento__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-feature-bento__header { max-width: 46rem; margin: 0 auto var(--discern-space-12); text-align: center; } .discern-feature-bento__eyebrow, .discern-feature-bento__item-eyebrow, .discern-feature-bento__item h3 { font-family: var(--discern-font-ui); } .discern-feature-bento__eyebrow, .discern-feature-bento__item-eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-feature-bento__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; margin-inline: auto; overflow-wrap: anywhere; text-wrap: balance; } .discern-feature-bento__description { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-feature-bento__description > :last-child { margin-block-end: 0; } .discern-feature-bento__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--discern-feature-bento-rows, 1), minmax(min-content, auto)); gap: var(--discern-space-4); } .discern-feature-bento__item { display: flex; grid-column: var(--discern-feature-bento-column, 1) / span var(--discern-feature-bento-column-span, 1); grid-row: var(--discern-feature-bento-row, 1) / span var(--discern-feature-bento-row-span, 1); min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-card); } .discern-feature-bento__item--wide:has(.discern-feature-bento__visual) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .discern-feature-bento__item--accent { border-color: var(--discern-color-accent-300); background: var(--discern-color-accent-100); } .discern-feature-bento__item--sunken { background: var(--discern-color-surface-sunken); } .discern-feature-bento__copy { min-inline-size: 0; overflow-wrap: anywhere; padding: var(--discern-space-6); } :is(.discern-feature-bento__item--large, .discern-feature-bento__item--tall) .discern-feature-bento__copy { padding: var(--discern-space-8); } .discern-feature-bento__copy > :last-child > :last-child { margin-block-end: 0; } .discern-feature-bento__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; margin-block-end: var(--discern-space-8); color: var(--discern-color-accent-600); } .discern-feature-bento__icon svg { inline-size: 100%; block-size: 100%; } .discern-feature-bento__item h3 { margin-block-end: var(--discern-space-3); font-size: var(--discern-font-size-card-title); font-weight: var(--discern-font-weight-strong); } .discern-feature-bento__item--large h3, .discern-feature-bento__item--wide h3 { font-size: var(--discern-font-size-display-sm); } .discern-feature-bento__item .discern-feature-bento__copy > div:last-child { color: var(--discern-color-ink-muted); } .discern-feature-bento__visual { display: grid; flex: 1; place-items: center; min-height: calc(var(--discern-space-24) + var(--discern-space-12)); margin: 0 var(--discern-space-4) var(--discern-space-4); overflow: hidden; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-canvas); } .discern-feature-bento__item--wide:has(.discern-feature-bento__visual) .discern-feature-bento__copy { align-self: center; } .discern-feature-bento__item--wide .discern-feature-bento__visual { min-height: 0; margin: var(--discern-space-4) var(--discern-space-4) var(--discern-space-4) 0; } @container discern-feature-bento (max-width: 53.125rem) { .discern-feature-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--discern-feature-bento-compact-rows, 1), minmax(min-content, auto)); } .discern-feature-bento__item { grid-column: var(--discern-feature-bento-compact-column, 1) / span var(--discern-feature-bento-column-span, 1); grid-row: var(--discern-feature-bento-compact-row, 1) / span var(--discern-feature-bento-row-span, 1); } } @container discern-feature-bento (max-width: 38.75rem) { .discern-feature-bento__grid { grid-template-columns: 1fr; grid-template-rows: none; } .discern-feature-bento__item { grid-column: 1; grid-row: auto; } .discern-feature-bento__item--wide:has(.discern-feature-bento__visual) { display: flex; } .discern-feature-bento__item--wide:has(.discern-feature-bento__visual) .discern-feature-bento__copy { align-self: auto; } .discern-feature-bento__item--wide .discern-feature-bento__visual { min-height: calc(var(--discern-space-24) + var(--discern-space-12)); margin: 0 var(--discern-space-4) var(--discern-space-4); } } } @layer discern.components { .discern-split-feature { container: discern-split-feature / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-canvas); } .discern-split-feature--surface { background: var(--discern-color-surface); } .discern-split-feature--sunken { background: var(--discern-color-surface-sunken); } .discern-split-feature__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); gap: clamp(var(--discern-space-12), 8cqi, calc(var(--discern-space-24) + var(--discern-space-4))); align-items: center; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-split-feature--reverse .discern-split-feature__content { order: 2; } .discern-split-feature__content, .discern-split-feature__media { min-width: 0; } .discern-split-feature__eyebrow, .discern-split-feature__points strong { font-family: var(--discern-font-ui); } .discern-split-feature__eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-split-feature__content h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 14ch; } .discern-split-feature__description { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-split-feature__description > :last-child { margin-block-end: 0; } .discern-split-feature__points { display: grid; gap: var(--discern-space-4); margin: var(--discern-space-8) 0 0; padding: 0; list-style: none; } .discern-split-feature__points li { display: grid; grid-template-columns: auto 1fr; gap: var(--discern-space-3); align-items: start; } .discern-split-feature__check { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--discern-color-success-soft); color: var(--discern-color-success-deep); font-size: var(--discern-font-size-xs); } .discern-split-feature__points strong, .discern-split-feature__points li span span { display: block; } .discern-split-feature__points strong { font-size: var(--discern-font-size-sm); } .discern-split-feature__points li span span { margin-block-start: var(--discern-space-1); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-split-feature__actions { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); margin-block-start: var(--discern-space-8); } @container discern-split-feature (max-width: 51.25rem) { .discern-split-feature__inner { grid-template-columns: 1fr; } .discern-split-feature--reverse .discern-split-feature__content { order: 0; } .discern-split-feature__media { width: min(100%, 38rem); margin-inline: auto; } } } @layer discern.components { .discern-process-steps { --discern-process-steps-marker-size: 2.8rem; container: discern-process-steps / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-canvas); } .discern-process-steps__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-process-steps__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.45fr); gap: var(--discern-space-12); align-items: end; margin-block-end: var(--discern-space-12); } .discern-process-steps__eyebrow, .discern-process-steps__step-eyebrow, .discern-process-steps__content h3, .discern-process-steps__detail { font-family: var(--discern-font-ui); } .discern-process-steps__eyebrow, .discern-process-steps__step-eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-process-steps__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 15ch; margin: 0; } .discern-process-steps__description, .discern-process-steps__copy { color: var(--discern-color-ink-muted); } .discern-process-steps__description > :last-child, .discern-process-steps__copy > :last-child { margin-block-end: 0; } .discern-process-steps__list { display: grid; grid-template-columns: repeat(var(--discern-process-columns, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) { grid-template-columns: repeat(var(--discern-process-columns, 5), minmax(0, 1fr)); } .discern-process-steps__list li { position: relative; display: flex; flex-direction: column; min-width: 0; padding-inline-end: var(--discern-space-6); } .discern-process-steps__list li:not(:last-child)::before { position: absolute; top: calc(var(--discern-process-steps-marker-size) / 2); right: 0; left: calc(var(--discern-process-steps-marker-size) + var(--discern-space-2)); border-block-start: 1px dashed var(--discern-color-border-strong); content: ""; } .discern-process-steps__marker { position: relative; z-index: 1; display: grid; place-items: center; inline-size: var(--discern-process-steps-marker-size); block-size: var(--discern-process-steps-marker-size); border: 1px solid var(--discern-color-accent-500); border-radius: 50%; background: var(--discern-color-canvas); box-shadow: var(--discern-shadow-card); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); } .discern-process-steps__content { display: flex; flex: 1; flex-direction: column; padding-block-start: var(--discern-space-6); } .discern-process-steps__content h3 { margin-block-end: var(--discern-space-3); font-size: var(--discern-font-size-lg); font-weight: var(--discern-font-weight-strong); } .discern-process-steps__detail { margin-block-start: auto; padding-block-start: var(--discern-space-4); border-block-start: 1px solid var(--discern-color-border); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-process-steps__copy { padding-block-end: var(--discern-space-5); } .discern-process-steps--vertical .discern-process-steps__list { grid-template-columns: 1fr; max-width: 44rem; } .discern-process-steps--vertical .discern-process-steps__list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--discern-space-6); padding: 0 0 var(--discern-space-8); } .discern-process-steps--vertical .discern-process-steps__list li:not(:last-child)::before { inset: calc(var(--discern-process-steps-marker-size) + var(--discern-space-2)) auto 0 calc(var(--discern-process-steps-marker-size) / 2); border-block-start: 0; border-inline-start: 1px dashed var(--discern-color-border-strong); } .discern-process-steps--vertical .discern-process-steps__content { padding-block-start: var(--discern-space-2); } @container discern-process-steps (max-width: 51.25rem) { .discern-process-steps__header { grid-template-columns: 1fr; gap: var(--discern-space-5); } .discern-process-steps--horizontal .discern-process-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--discern-space-10) var(--discern-space-4); } .discern-process-steps--horizontal .discern-process-steps__list li:nth-child(2n)::before { display: none; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li { grid-column: span 2; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li:nth-last-child(-n + 2) { grid-column: span 3; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li:nth-child(2n)::before { display: block; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li:nth-child(3)::before { display: none; } } @container discern-process-steps (max-width: 35rem) { .discern-process-steps--horizontal .discern-process-steps__list, .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; } .discern-process-steps--horizontal .discern-process-steps__list li::before { display: none; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li { grid-column: 1; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li:nth-last-child(-n + 2) { grid-column: 1; } .discern-process-steps--horizontal .discern-process-steps__list:has(> :nth-child(5):last-child) > li::before { display: none; } } } @layer discern.components { .discern-metrics-band { container: discern-metrics-band / inline-size; padding-block: clamp(calc(var(--discern-space-12) + var(--discern-space-2)), 7cqi, calc(var(--discern-space-20) + var(--discern-space-2))); border-block: 1px solid var(--discern-color-border); background: var(--discern-color-surface); } .discern-metrics-band--accent { border-color: var(--discern-color-accent-300); background: var(--discern-color-accent-100); } .discern-metrics-band--contrast { border-color: var(--discern-color-border-strong); background: var(--discern-color-inverse-surface); color: var(--discern-color-inverse-ink); } .discern-metrics-band__inner { display: grid; grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 1.35fr); gap: var(--discern-space-12); align-items: end; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-metrics-band__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 11ch; margin: 0; font-size: var(--discern-font-size-display-md); } .discern-metrics-band--contrast .discern-metrics-band__header h2 { color: inherit; } .discern-metrics-band__eyebrow, .discern-metrics-band__value, .discern-metrics-band__list dt { font-family: var(--discern-font-ui); } .discern-metrics-band__eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-600); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-metrics-band__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; } .discern-metrics-band__list:only-child { grid-column: 1 / -1; } .discern-metrics-band__list > div { display: flex; min-width: 0; padding-inline: var(--discern-space-6); flex-direction: column; } .discern-metrics-band__list > div + div { border-inline-start: 1px solid var(--discern-color-border); } .discern-metrics-band--contrast .discern-metrics-band__list > div + div { border-color: color-mix(in oklab, var(--discern-color-inverse-ink) 22%, transparent); } .discern-metrics-band__value { order: -2; margin: 0; color: var(--discern-color-accent-600); font-size: clamp(2.3rem, 5cqi, 3.65rem); font-weight: var(--discern-font-weight-strong); letter-spacing: -0.04em; line-height: 1; } .discern-metrics-band--contrast .discern-metrics-band__value, .discern-metrics-band--contrast .discern-metrics-band__eyebrow { color: var(--discern-color-inverse-ink); } .discern-metrics-band__list dt { order: -1; margin-block-start: var(--discern-space-3); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); } .discern-metrics-band__detail { margin-block-start: var(--discern-space-1); margin-inline: 0; color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-metrics-band--contrast .discern-metrics-band__detail { color: color-mix(in oklab, var(--discern-color-inverse-ink) 68%, transparent); } @container discern-metrics-band (max-width: 47.5rem) { .discern-metrics-band__inner { grid-template-columns: 1fr; } .discern-metrics-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--discern-space-8) 0; } .discern-metrics-band__list > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; } } } @layer discern.components { .discern-comparison-table { container: discern-comparison-table / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-surface-sunken); } .discern-comparison-table__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-comparison-table__header { max-width: 46rem; margin: 0 auto var(--discern-space-10); text-align: center; } .discern-comparison-table__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; } .discern-comparison-table__eyebrow, .discern-comparison-table thead th, .discern-comparison-table tbody th { font-family: var(--discern-font-ui); } .discern-comparison-table__eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-comparison-table__description { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-comparison-table__description > :last-child { margin-block-end: 0; } .discern-comparison-table__frame { overflow: hidden; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-card); } .discern-comparison-table table { width: 100%; border-collapse: collapse; table-layout: fixed; } .discern-comparison-table :is(th, td) { padding: var(--discern-space-5) var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border); text-align: start; vertical-align: middle; } .discern-comparison-table tr:last-child :is(th, td) { border-block-end: 0; } .discern-comparison-table thead th { color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-comparison-table tbody th { color: var(--discern-color-ink); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); } .discern-comparison-table tbody td { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-comparison-table__highlight { background: color-mix(in oklab, var(--discern-color-accent-100) 72%, var(--discern-color-surface)); } .discern-comparison-table__badge { display: inline-block; margin-inline-start: var(--discern-space-2); padding: calc(var(--discern-space-1) / 2) var(--discern-space-2); border-radius: var(--discern-radius-pill); background: var(--discern-color-accent-200); color: var(--discern-color-accent-800); font-size: var(--discern-font-size-xs); } @container discern-comparison-table (max-width: 42.5rem) { .discern-comparison-table__frame { overflow: visible; border: 0; background: transparent; box-shadow: none; } .discern-comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .discern-comparison-table tbody, .discern-comparison-table tr, .discern-comparison-table :is(th, td) { display: block; } .discern-comparison-table tr { overflow: hidden; margin-block-end: var(--discern-space-4); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-surface); } .discern-comparison-table :is(th, td) { border-block-end: 1px solid var(--discern-color-border) !important; } .discern-comparison-table td::before { display: block; margin-block-end: var(--discern-space-1); color: var(--discern-color-ink-faint); content: attr(data-label); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-comparison-table tr td:last-child { border-block-end: 0 !important; } } } @layer discern.components { .discern-testimonial { container: discern-testimonial / inline-size; padding: var(--discern-section-space) var(--discern-space-6); background: var(--discern-color-canvas); } .discern-testimonial__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.28fr); gap: var(--discern-space-10); width: min(100%, var(--discern-page-max)); margin: 0 auto; overflow: hidden; padding: clamp(var(--discern-space-8), 6cqi, calc(var(--discern-space-16) + var(--discern-space-2))); border: 1px solid var(--discern-color-accent-300); border-radius: var(--discern-radius-lg); background: linear-gradient(135deg, var(--discern-color-accent-100), transparent 68%), var(--discern-color-surface); box-shadow: var(--discern-shadow-window); } .discern-testimonial__mark { position: absolute; top: calc(-1 * var(--discern-space-5)); right: var(--discern-space-6); color: color-mix(in oklab, var(--discern-color-accent-500) 22%, transparent); font-family: var(--discern-font-display); font-size: clamp(8rem, 18cqi, 15rem); font-weight: var(--discern-font-weight-display); line-height: 1; pointer-events: none; } .discern-testimonial__main { position: relative; min-width: 0; } .discern-testimonial__eyebrow, .discern-testimonial figcaption strong, .discern-testimonial figcaption span span, .discern-testimonial__metric strong { font-family: var(--discern-font-ui); } .discern-testimonial__eyebrow { margin-block-end: var(--discern-space-5); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-testimonial blockquote { max-width: 30ch; margin: 0; color: var(--discern-color-ink); font-family: var(--discern-font-display); font-size: clamp(1.8rem, 4.2cqi, 3.1rem); font-weight: var(--discern-font-weight-display); letter-spacing: -0.018em; line-height: 1.12; text-wrap: balance; } .discern-testimonial blockquote > :last-child { margin-block-end: 0; } .discern-testimonial figcaption { display: flex; align-items: center; gap: var(--discern-space-3); margin-block-start: var(--discern-space-8); } .discern-testimonial__avatar { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; overflow: hidden; border: 1px solid var(--discern-color-border-strong); border-radius: 50%; background: var(--discern-color-surface-sunken); color: var(--discern-color-accent-700); } .discern-testimonial figcaption strong, .discern-testimonial figcaption span span, .discern-testimonial__metric strong, .discern-testimonial__metric span { display: block; } .discern-testimonial figcaption strong { font-size: var(--discern-font-size-sm); } .discern-testimonial figcaption span span { color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-testimonial__metric { position: relative; align-self: end; padding-inline-start: var(--discern-space-8); border-inline-start: 1px solid var(--discern-color-border); } .discern-testimonial__metric strong { color: var(--discern-color-accent-600); font-size: clamp(2.5rem, 5cqi, 4rem); letter-spacing: -0.045em; line-height: 1; } .discern-testimonial__metric span { margin-block-start: var(--discern-space-3); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); } .discern-testimonial--card { padding: 0; } .discern-testimonial--card .discern-testimonial__frame { grid-template-columns: 1fr; padding: var(--discern-space-8); box-shadow: var(--discern-shadow-card); } .discern-testimonial--card blockquote { font-size: var(--discern-font-size-display-md); } .discern-testimonial--card .discern-testimonial__metric { padding: var(--discern-space-6) 0 0; border-block-start: 1px solid var(--discern-color-border); border-inline-start: 0; } @container discern-testimonial (max-width: 45rem) { .discern-testimonial__frame { grid-template-columns: 1fr; } .discern-testimonial__metric { padding: var(--discern-space-6) 0 0; border-block-start: 1px solid var(--discern-color-border); border-inline-start: 0; } } } @layer discern.components { .discern-case-study { container: discern-case-study / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-canvas); } .discern-case-study__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr); gap: clamp(var(--discern-space-12), 8cqi, calc(var(--discern-space-24) + var(--discern-space-4))); align-items: center; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-case-study--reverse .discern-case-study__story { order: 2; } .discern-case-study__eyebrow, .discern-case-study__stats dd { font-family: var(--discern-font-ui); } .discern-case-study__eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-case-study__story h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 14ch; } .discern-case-study__summary { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-case-study__summary > :last-child, .discern-case-study__body > :last-child { margin-block-end: 0; } .discern-case-study__body { margin-block-start: var(--discern-space-6); padding-block-start: var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-case-study__action { margin-block-start: var(--discern-space-8); } .discern-case-study__evidence { overflow: hidden; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-window); } .discern-case-study__media { min-height: 21rem; overflow: hidden; border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-surface-sunken); } .discern-case-study__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; padding: var(--discern-space-6); } .discern-case-study__stats > div { padding-inline: var(--discern-space-4); } .discern-case-study__stats > div + div { border-inline-start: 1px solid var(--discern-color-border); } .discern-case-study__stats dd { margin: 0; color: var(--discern-color-accent-600); font-size: var(--discern-font-size-display-md); font-weight: var(--discern-font-weight-strong); line-height: 1; } .discern-case-study__stats dt { margin-block-start: var(--discern-space-2); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } @container discern-case-study (max-width: 51.25rem) { .discern-case-study__inner { grid-template-columns: 1fr; } .discern-case-study--reverse .discern-case-study__story { order: 0; } .discern-case-study__evidence { width: min(100%, 38rem); margin-inline: auto; } } } @layer discern.components { .discern-faq-block { container: discern-faq-block / inline-size; padding-block: var(--discern-section-space); background: var(--discern-color-surface-sunken); } .discern-faq-block__inner { display: grid; grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr); gap: clamp(var(--discern-space-12), 8cqi, calc(var(--discern-space-24) + var(--discern-space-4))); align-items: start; width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-faq-block__header { position: sticky; top: calc(var(--discern-space-24) + var(--discern-space-4)); } .discern-faq-block__eyebrow, .discern-faq-block summary { font-family: var(--discern-font-ui); } .discern-faq-block__eyebrow { margin-block-end: var(--discern-space-3); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-faq-block__header h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 12ch; } .discern-faq-block__description { color: var(--discern-color-ink-muted); } .discern-faq-block__description > :last-child, .discern-faq-block__answer > :last-child { margin-block-end: 0; } .discern-faq-block__aside { margin-block-start: var(--discern-space-6); } .discern-faq-block__items { border-block-start: 1px solid var(--discern-color-border-strong); } .discern-faq-block details { border-block-end: 1px solid var(--discern-color-border-strong); } .discern-faq-block summary { display: flex; align-items: center; justify-content: space-between; gap: var(--discern-space-6); min-height: 5rem; padding-block: var(--discern-space-5); color: var(--discern-color-ink); cursor: pointer; font-size: var(--discern-font-size-lg); font-weight: var(--discern-font-weight-strong); list-style: none; } .discern-faq-block summary::-webkit-details-marker { display: none; } .discern-faq-block summary:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: var(--discern-space-1); } .discern-faq-block__toggle { position: relative; flex: none; inline-size: 1.25rem; block-size: 1.25rem; } .discern-faq-block__toggle::before, .discern-faq-block__toggle::after { position: absolute; inset: 50% 0 auto; border-block-start: 1px solid var(--discern-color-border-strong); content: ""; transition: rotate var(--discern-duration-fast) var(--discern-ease-out); } .discern-faq-block__toggle::after { rotate: 90deg; } .discern-faq-block details[open] .discern-faq-block__toggle::after { rotate: 0deg; } .discern-faq-block__answer { max-width: var(--discern-measure); padding: 0 var(--discern-space-10) var(--discern-space-6) 0; color: var(--discern-color-ink-muted); } @container discern-faq-block (max-width: 47.5rem) { .discern-faq-block__inner { grid-template-columns: 1fr; } .discern-faq-block__header { position: static; } } } @layer discern.components { .discern-cta-band { container: discern-cta-band / inline-size; padding: var(--discern-space-6); background: var(--discern-color-canvas); } .discern-cta-band__inner { position: relative; isolation: isolate; overflow: hidden; width: min(100%, var(--discern-page-max)); margin-inline: auto; padding: clamp(var(--discern-space-12), 8cqi, calc(var(--discern-space-24) + var(--discern-space-2))); border: 1px solid var(--discern-color-accent-300); border-radius: var(--discern-radius-lg); background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--discern-color-accent-400) 42%, transparent), transparent 38%), var(--discern-color-accent-100); box-shadow: var(--discern-shadow-window); } .discern-cta-band--sunken .discern-cta-band__inner { border-color: var(--discern-color-border); background: var(--discern-color-surface-sunken); } .discern-cta-band--contrast .discern-cta-band__inner { border-color: var(--discern-color-action-edge); background: var(--discern-color-action); color: var(--discern-color-on-action); } .discern-cta-band__inner::after { position: absolute; z-index: -1; right: calc(-1 * var(--discern-space-16)); bottom: calc(-1 * (var(--discern-space-24) + var(--discern-space-4))); inline-size: 18rem; block-size: 18rem; border: 1px dashed var(--discern-color-border-strong); border-radius: 50%; content: ""; opacity: 0.12; } .discern-cta-band__content { display: grid; justify-items: center; max-width: 48rem; margin-inline: auto; text-align: center; } .discern-cta-band__eyebrow, .discern-cta-band__note { font-family: var(--discern-font-ui); } .discern-cta-band__eyebrow { margin-block-end: var(--discern-space-4); color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-cta-band--contrast .discern-cta-band__eyebrow { color: var(--discern-color-on-action); } .discern-cta-band__content h2 { font-family: var(--discern-font-marketing); font-weight: var(--discern-font-weight-marketing); letter-spacing: -0.055em; max-width: 14ch; margin-inline: auto; } .discern-cta-band--contrast .discern-cta-band__content h2 { color: inherit; } .discern-cta-band__description { max-width: var(--discern-measure); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-lg); } .discern-cta-band--contrast .discern-cta-band__description, .discern-cta-band--contrast .discern-cta-band__note { color: color-mix(in oklab, var(--discern-color-on-action) 76%, transparent); } .discern-cta-band--contrast .discern-cta-band__inner::after { border-color: var(--discern-color-action-edge); } .discern-cta-band__description > :last-child { margin-block-end: 0; } .discern-cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--discern-space-3); margin-block-start: var(--discern-space-8); } .discern-cta-band__note { margin-block-start: var(--discern-space-4); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } :is(.discern-cta-band--split, .discern-cta-band--with-visual) .discern-cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.6fr); gap: var(--discern-space-12); align-items: center; } :is(.discern-cta-band--split, .discern-cta-band--with-visual) .discern-cta-band__content { justify-items: start; margin: 0; text-align: start; } :is(.discern-cta-band--split, .discern-cta-band--with-visual) .discern-cta-band__content h2 { margin-inline: 0; } :is(.discern-cta-band--split, .discern-cta-band--with-visual) .discern-cta-band__actions { justify-content: flex-start; } .discern-cta-band__visual { position: relative; min-width: 0; } @container discern-cta-band (max-width: 45rem) { :is(.discern-cta-band--split, .discern-cta-band--with-visual) .discern-cta-band__inner { grid-template-columns: 1fr; } } } @layer discern.components { .discern-site-footer { padding: clamp(calc(var(--discern-space-12) + var(--discern-space-2)), 8vw, var(--discern-space-24)) var(--discern-space-6) var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border); background: var(--discern-color-surface-sunken); } .discern-site-footer__inner { display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr); gap: var(--discern-space-16); width: min(100%, var(--discern-page-max)); margin-inline: auto; } .discern-site-footer__brand-column { max-width: 24rem; } .discern-site-footer__brand { display: inline-flex; align-items: center; gap: var(--discern-space-3); color: var(--discern-color-ink); font-size: 1.35rem; text-decoration: none; } .discern-site-footer__brand--ui, .discern-site-footer__nav h2, .discern-site-footer__nav a { font-family: var(--discern-font-ui); } .discern-site-footer__brand--ui { font-weight: var(--discern-font-weight-strong); } .discern-site-footer__brand--display { font-family: var(--discern-font-display); font-weight: var(--discern-font-weight-display); } .discern-site-footer__brand--mono { font-family: var(--discern-font-mono); font-weight: var(--discern-font-weight-strong); } .discern-site-footer__brand--inherit { font-family: inherit; font-weight: inherit; } .discern-site-footer__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; max-inline-size: 10rem; block-size: 2.1rem; color: inherit; font-style: normal; line-height: 1; } .discern-site-footer__mark--tile { min-inline-size: 2.1rem; padding-inline: var(--discern-space-2); border: 1px solid var(--discern-color-accent-600); border-radius: var(--discern-radius-sm); background: var(--discern-color-accent-200); box-shadow: var(--discern-shadow-card); color: var(--discern-color-accent-800); } .discern-site-footer__mark--plain { font-size: 1.15em; } .discern-site-footer__mark--square { inline-size: 2.1rem; padding-inline: 0; overflow: hidden; } .discern-site-footer__mark > :where(img, svg) { display: block; inline-size: auto; max-inline-size: 100%; block-size: 100%; object-fit: contain; } .discern-site-footer__description { margin-block-start: var(--discern-space-5); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-site-footer__description > :last-child { margin-block-end: 0; } .discern-site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--discern-space-8); } .discern-site-footer__nav h2 { margin-block-end: var(--discern-space-4); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-site-footer__nav ul { display: grid; gap: var(--discern-space-2); margin: 0; padding: 0; list-style: none; } .discern-site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 1.5rem; color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); text-decoration: none; } .discern-site-footer__nav a:is(:hover, :focus-visible) { color: var(--discern-color-accent-700); text-decoration: underline; text-underline-offset: 0.25em; } .discern-site-footer__base { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: var(--discern-space-6); padding-block-start: var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-site-footer__base a { color: inherit; } @media (max-width: 45rem) { .discern-site-footer__inner { grid-template-columns: 1fr; gap: var(--discern-space-10); } .discern-site-footer__base { flex-direction: column; } } } @layer discern.components { .discern-marketing-stage { container-type: inline-size; min-inline-size: 0; margin: 0; } .discern-marketing-stage__label { display: flex; align-items: center; min-block-size: 2.75rem; color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.08em; line-height: var(--discern-leading-snug); text-transform: uppercase; } .discern-marketing-stage__body { position: relative; display: grid; min-inline-size: 0; overflow: clip; } .discern-marketing-stage--framed { border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-window); } .discern-marketing-stage--framed .discern-marketing-stage__label { padding-inline: var(--discern-space-5); border-block-end: 1px solid var(--discern-color-border); } .discern-marketing-stage--framed .discern-marketing-stage__body { padding: clamp(var(--discern-space-5), 4cqi, var(--discern-space-10)); } .discern-marketing-stage--framed .discern-marketing-stage__caption { padding: 0 var(--discern-space-5) var(--discern-space-4); } .discern-marketing-stage--inset { padding: clamp(var(--discern-space-5), 4cqi, var(--discern-space-10)); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface-sunken); } .discern-marketing-stage--inset .discern-marketing-stage__label { min-block-size: auto; margin-block-end: var(--discern-space-5); } .discern-marketing-stage--plain .discern-marketing-stage__label { min-block-size: auto; margin-block-end: var(--discern-space-4); } .discern-marketing-stage__caption { margin-block-start: var(--discern-space-4); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } :is(.discern-marketing-stage--landscape, .discern-marketing-stage--square) .discern-marketing-stage__body { place-items: center; } .discern-marketing-stage--landscape .discern-marketing-stage__body { aspect-ratio: 16 / 10; } .discern-marketing-stage--square .discern-marketing-stage__body { aspect-ratio: 1; } .discern-marketing-stage__body > * { min-inline-size: 0; max-inline-size: 100%; } @container (max-width: 32.5rem) { :is(.discern-marketing-stage--landscape, .discern-marketing-stage--square) .discern-marketing-stage__body { aspect-ratio: auto; } } } @layer discern.components { .discern-editorial-hero { container-type: inline-size; isolation: isolate; overflow: clip; } .discern-editorial-hero__backdrop { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0.42; } .discern-editorial-hero__content { position: relative; z-index: 1; } .discern-editorial-hero__header { max-inline-size: 74rem; } .discern-editorial-hero__eyebrow { margin-block-end: var(--discern-space-5); color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.11em; line-height: var(--discern-leading-snug); text-transform: uppercase; } .discern-editorial-hero__title { max-inline-size: 15ch; margin: 0; color: inherit; font-family: var(--discern-font-display); font-size: clamp(var(--discern-font-size-display-lg), calc(1rem + 7cqi), calc(var(--discern-font-size-display-lg) * 2.5)); font-weight: var(--discern-font-weight-display); letter-spacing: -0.045em; line-height: var(--discern-leading-tight); overflow-wrap: anywhere; text-wrap: balance; } .discern-editorial-hero__title em { color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); font-weight: inherit; } .discern-editorial-hero__lower { display: grid; grid-template-columns: minmax(16rem, 0.7fr) minmax(24rem, 1.3fr); gap: clamp(var(--discern-space-8), 7cqi, var(--discern-space-16)); align-items: end; margin-block-start: clamp(var(--discern-space-10), 8cqi, var(--discern-space-20)); } .discern-editorial-hero__copy { max-inline-size: 38rem; } .discern-editorial-hero__description { color: var(--discern-color-ink-muted); font-size: clamp(var(--discern-font-size-lg), 1.8cqi, 1.35rem); line-height: var(--discern-leading-body); } .discern-editorial-hero__description > :first-child { margin-block-start: 0; } .discern-editorial-hero__description > :last-child { margin-block-end: 0; } .discern-editorial-hero__actions { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); margin-block-start: var(--discern-space-8); } .discern-editorial-hero__meta { margin-block-start: var(--discern-space-6); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-editorial-hero__visual { align-self: stretch; } .discern-editorial-hero--without-visual .discern-editorial-hero__lower { grid-template-columns: minmax(0, 42rem); } @container (max-width: 53.75rem) { .discern-editorial-hero__lower { grid-template-columns: 1fr; } .discern-editorial-hero__copy { max-inline-size: 44rem; } } } @layer discern.components { .discern-narrative-chapter { container-type: inline-size; } .discern-narrative-chapter__layout { display: grid; grid-template-columns: minmax(17rem, 0.78fr) minmax(24rem, 1.22fr); gap: clamp(var(--discern-space-10), 8cqi, var(--discern-space-20)); align-items: start; } .discern-narrative-chapter__intro { --discern-marketing-intro-title-size: var(--discern-font-size-display-md); --discern-marketing-intro-title-tracking: -0.01em; margin-block-end: 0; min-inline-size: 0; } .discern-narrative-chapter__reading { min-inline-size: 0; max-inline-size: 48rem; } .discern-narrative-chapter__body { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-md); line-height: 1.72; } .discern-narrative-chapter__body > :first-child { margin-block-start: 0; } .discern-narrative-chapter__body > :last-child, .discern-narrative-chapter__aside > :last-child { margin-block-end: 0; } .discern-narrative-chapter__body h3, .discern-narrative-chapter__body strong { color: var(--discern-color-ink); } .discern-narrative-chapter__body h3 { margin-block: var(--discern-space-10) var(--discern-space-3); font-size: var(--discern-font-size-display-sm); line-height: var(--discern-leading-snug); } .discern-narrative-chapter__aside { display: grid; grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr); gap: var(--discern-space-8); margin-block-start: var(--discern-space-10); padding-block-start: var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border-strong); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-narrative-chapter__aside > :first-child { color: var(--discern-color-ink); font-weight: var(--discern-font-weight-strong); } @container (max-width: 51.25rem) { .discern-narrative-chapter__layout { grid-template-columns: 1fr; } .discern-narrative-chapter__reading { max-inline-size: 44rem; } } @container (max-width: 32.5rem) { .discern-narrative-chapter__aside { grid-template-columns: 1fr; gap: var(--discern-space-3); } } } @layer discern.components { .discern-journey-overview { container-type: inline-size; } .discern-journey-overview__intro { --discern-marketing-intro-title-size: var(--discern-font-size-display-md); --discern-marketing-intro-title-tracking: -0.01em; max-inline-size: 56rem; } .discern-journey-overview__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--discern-space-8); margin: 0; padding: 0; list-style: none; counter-reset: discern-journey-overview; } .discern-journey-overview__step { position: relative; min-inline-size: 0; padding-block-start: var(--discern-space-8); border-block-start: 1px solid var(--discern-color-border-strong); counter-increment: discern-journey-overview; } .discern-journey-overview__step::before { display: block; margin-block-end: var(--discern-space-12); color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); content: counter(discern-journey-overview, decimal-leading-zero); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.08em; line-height: var(--discern-leading-snug); } .discern-journey-overview__title { max-inline-size: 16ch; margin: 0; color: var(--discern-color-ink); font-size: var(--discern-font-size-display-sm); line-height: var(--discern-leading-snug); text-wrap: balance; } .discern-journey-overview__description { margin-block-start: var(--discern-space-4); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-journey-overview__description > :first-child, .discern-journey-overview__outcome > :first-child { margin-block-start: 0; } .discern-journey-overview__description > :last-child, .discern-journey-overview__outcome > :last-child { margin-block-end: 0; } .discern-journey-overview__outcome { margin-block-start: var(--discern-space-8); padding-inline-start: var(--discern-space-4); border-inline-start: 0.125rem solid var(--discern-color-accent-500); color: var(--discern-color-ink); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-body); } @container (max-width: 32.5rem) { .discern-journey-overview__steps { gap: var(--discern-space-10); } .discern-journey-overview__step::before { margin-block-end: var(--discern-space-6); } } } @layer discern.components { .discern-outcome-spotlight { container-type: inline-size; } .discern-outcome-spotlight__lead { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr); gap: clamp(var(--discern-space-10), 8cqi, var(--discern-space-20)); align-items: end; } .discern-outcome-spotlight__intro { --discern-marketing-intro-title-size: var(--discern-font-size-display-md); --discern-marketing-intro-title-tracking: -0.01em; margin-block-end: 0; } .discern-outcome-spotlight__primary, .discern-outcome-spotlight__supporting { margin: 0; } .discern-outcome-spotlight__primary div, .discern-outcome-spotlight__fact { display: flex; flex-direction: column; } .discern-outcome-spotlight__value { order: 0; margin: 0; color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); font-family: var(--discern-font-display); font-size: clamp(4rem, 8cqi, 8rem); font-weight: var(--discern-font-weight-display); letter-spacing: -0.065em; line-height: 0.78; text-wrap: balance; } .discern-outcome-spotlight--compact .discern-outcome-spotlight__value { max-inline-size: 12ch; font-size: clamp(3.5rem, 6cqi, 5.5rem); line-height: 0.88; } .discern-outcome-spotlight__label { order: 1; max-inline-size: 29rem; margin-block-start: var(--discern-space-8); color: var(--discern-color-ink-muted); font-size: clamp(var(--discern-font-size-md), 1.8cqi, 1.3rem); line-height: var(--discern-leading-body); } .discern-outcome-spotlight__supporting { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--discern-space-8); margin-block-start: clamp(var(--discern-space-12), 8cqi, var(--discern-space-20)); padding-block-start: var(--discern-space-8); border-block-start: 1px solid var(--discern-color-border-strong); } .discern-outcome-spotlight__fact dd { order: 0; margin: 0; color: var(--discern-color-ink); font-family: var(--discern-font-display); font-size: var(--discern-font-size-display-md); font-weight: var(--discern-font-weight-display); line-height: var(--discern-leading-tight); } .discern-outcome-spotlight__fact dt { order: 1; max-inline-size: 18rem; margin-block-start: var(--discern-space-3); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } @container (max-width: 47.5rem) { .discern-outcome-spotlight__lead { grid-template-columns: 1fr; } .discern-outcome-spotlight__primary { margin-block-start: var(--discern-space-6); } } @container (max-width: 32.5rem) { .discern-outcome-spotlight__value { font-size: clamp(3.75rem, 18cqi, 6rem); } .discern-outcome-spotlight--compact .discern-outcome-spotlight__value { font-size: clamp(3.25rem, 15cqi, 4.75rem); } } } @layer discern.components { .discern-voice-break { container-type: inline-size; } .discern-voice-break__eyebrow { margin-block-end: var(--discern-space-6); color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); letter-spacing: 0.1em; line-height: var(--discern-leading-snug); text-transform: uppercase; } .discern-voice-break__figure { display: grid; grid-template-columns: minmax(12rem, 0.38fr) minmax(22rem, 1.62fr); gap: clamp(var(--discern-space-10), 9cqi, var(--discern-space-20)); align-items: end; margin: 0; } .discern-voice-break__statement { grid-column: 2; grid-row: 1; min-inline-size: 0; } .discern-voice-break__attribution { grid-column: 1; display: flex; gap: var(--discern-space-4); align-items: center; padding-block-start: var(--discern-space-5); border-block-start: 1px solid var(--discern-color-border-strong); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-snug); } .discern-voice-break__attribution strong, .discern-voice-break__attribution span span { display: block; } .discern-voice-break__attribution strong { color: var(--discern-color-ink); } .discern-voice-break__attribution span span { margin-block-start: var(--discern-space-1); } .discern-voice-break__portrait { display: grid; flex: 0 0 3rem; place-items: center; inline-size: 3rem; block-size: 3rem; overflow: hidden; border-radius: var(--discern-radius-pill); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink-muted); } .discern-voice-break__portrait > * { max-inline-size: 100%; max-block-size: 100%; } .discern-voice-break__quote { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--discern-space-1) / 2); max-inline-size: 24ch; margin: 0; color: var(--discern-color-ink); font-family: var(--discern-font-display); font-size: clamp(var(--discern-font-size-display-md), 4.5cqi, var(--discern-font-size-display-lg)); font-weight: var(--discern-font-weight-display); letter-spacing: -0.04em; line-height: var(--discern-leading-snug); text-wrap: balance; } .discern-voice-break__mark { color: var(--discern-marketing-accent-ink, var(--discern-color-accent-700)); align-self: start; opacity: 0.5; } .discern-voice-break__text > :first-child { margin-block-start: 0; } .discern-voice-break__text > :last-child { margin-block-end: 0; } .discern-voice-break--end .discern-voice-break__statement { justify-items: end; padding-inline-end: var(--discern-space-2); text-align: end; } .discern-voice-break--end .discern-voice-break__quote { margin-inline-start: auto; } @container (max-width: 47.5rem) { .discern-voice-break__figure { grid-template-columns: 1fr; } .discern-voice-break__statement { grid-column: 1; grid-row: 1; } .discern-voice-break__attribution { grid-column: 1; grid-row: 2; max-inline-size: 24rem; } } } @layer discern.components { .discern-closing-statement { container-type: inline-size; isolation: isolate; overflow: clip; } .discern-closing-statement__backdrop { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0.36; } .discern-closing-statement__content { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; } .discern-closing-statement__intro { max-inline-size: 64rem; margin-block-end: 0; } .discern-closing-statement__actions { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); justify-content: center; margin-block-start: var(--discern-space-10); } .discern-closing-statement__reassurance { max-inline-size: 42rem; margin-block-start: var(--discern-space-6); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-closing-statement__reassurance > :first-child { margin-block-start: 0; } .discern-closing-statement__reassurance > :last-child { margin-block-end: 0; } @container (max-width: 32.5rem) { .discern-closing-statement__actions { align-items: stretch; inline-size: 100%; } .discern-closing-statement__actions > * { flex: 1 1 100%; justify-content: center; } } } @layer discern.components { .discern-article-header { padding-block: clamp(var(--discern-space-16), 9vw, calc(var(--discern-space-16) * 2)) clamp(var(--discern-space-12), 7vw, var(--discern-space-24)); border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-canvas); } .discern-article-header--sunken { background: var(--discern-color-surface-sunken); } .discern-article-header--accent { background: linear-gradient(135deg, var(--discern-color-accent-100), var(--discern-color-canvas) 68%); } .discern-article-header__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--discern-space-10), 7vw, var(--discern-space-24)); width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-article-header--with-media .discern-article-header__inner { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); align-items: end; } .discern-article-header__copy, .discern-article-header__media { min-width: 0; } .discern-article-header__eyebrow, .discern-article-header__author strong, .discern-article-header__author small, .discern-article-header__avatar, .discern-article-header__meta { font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-article-header__eyebrow { margin-block-end: var(--discern-space-5); color: var(--discern-color-accent-700); font-weight: var(--discern-font-weight-strong); } .discern-article-header h1, .discern-article-header h2 { font-size: var(--discern-font-size-display-lg); max-width: 17ch; margin-block-end: var(--discern-space-6); } .discern-article-header__standfirst { max-width: 48rem; color: var(--discern-color-ink-muted); font-family: var(--discern-font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.35; } .discern-article-header__standfirst > :last-child { margin-block-end: 0; } .discern-article-header__footer { display: flex; flex-wrap: wrap; gap: var(--discern-space-5) var(--discern-space-8); align-items: center; margin-block-start: var(--discern-space-8); padding-block-start: var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border); } .discern-article-header__authors, .discern-article-header__author { display: flex; align-items: center; } .discern-article-header__authors { flex-wrap: wrap; gap: var(--discern-space-5); margin: 0; font-style: normal; } .discern-article-header__author { gap: var(--discern-space-3); } .discern-article-header__author strong, .discern-article-header__author small { display: block; } .discern-article-header__author small { color: var(--discern-color-ink-faint); } .discern-article-header__avatar { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--discern-color-accent-500); border-radius: 50%; background: var(--discern-color-accent-100); color: var(--discern-color-accent-800); } .discern-article-header__meta { display: flex; flex-wrap: wrap; gap: var(--discern-space-2) var(--discern-space-5); margin: 0; padding: 0; color: var(--discern-color-ink-faint); list-style: none; } .discern-article-header__meta li + li::before { margin-inline-end: var(--discern-space-5); color: var(--discern-color-accent-500); content: "◇"; } .discern-article-header__actions { margin-inline-start: auto; } @media (max-width: 51.25rem) { .discern-article-header--with-media .discern-article-header__inner { grid-template-columns: 1fr; } .discern-article-header__media { width: min(100%, 38rem); } .discern-article-header__actions { width: 100%; margin-inline-start: 0; } } } @layer discern.components { .discern-article-layout { container: discern-article-layout / inline-size; width: min(100% - 2 * var(--discern-space-6), calc(var(--discern-page-max) + 10rem)); margin-inline: auto; padding-block: var(--discern-section-space); } .discern-article-layout__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--discern-rhythm-section); } .discern-article-layout__body, .discern-article-layout__navigation, .discern-article-layout__rail { min-inline-size: 0; } .discern-article-layout__body { width: 100%; max-inline-size: var(--discern-measure); margin-inline: auto; } @container discern-article-layout (min-width: 48rem) { .discern-article-layout__columns { grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 2fr); gap: var(--discern-rhythm-section); } .discern-article-layout--no-navigation .discern-article-layout__columns { grid-template-columns: minmax(0, 2fr) minmax(9rem, 0.5fr); } .discern-article-layout__rail { grid-column: 2; } .discern-article-layout__navigation > .discern-article-layout__sticky, .discern-article-layout--no-navigation .discern-article-layout__sticky { position: sticky; inset-block-start: var(--discern-article-sticky-offset, var(--discern-space-6)); } } @container discern-article-layout (min-width: 72rem) { .discern-article-layout__columns { grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 2fr) minmax(9rem, 0.5fr); } .discern-article-layout--no-rail .discern-article-layout__columns { grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 2fr); } .discern-article-layout__rail { grid-column: auto; } .discern-article-layout__sticky { position: sticky; inset-block-start: var(--discern-article-sticky-offset, var(--discern-space-6)); } } .discern-article-layout--no-navigation.discern-article-layout--no-rail .discern-article-layout__columns { grid-template-columns: minmax(0, 1fr); } } @layer discern.components { .discern-table-of-contents { container: discern-table-of-contents / inline-size; color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-table-of-contents__title { display: block; margin-block-end: var(--discern-space-4); color: var(--discern-color-ink); letter-spacing: 0.08em; text-transform: uppercase; } .discern-table-of-contents ol { display: grid; gap: var(--discern-space-1); margin: 0; padding: 0; border-inline-start: 1px solid var(--discern-color-border-strong); list-style: none; } .discern-table-of-contents a { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); gap: var(--discern-space-2); padding: var(--discern-space-2) var(--discern-space-3); border-inline-start: 0.125rem solid var(--discern-color-border); color: inherit; line-height: 1.35; text-decoration: none; transform: translateX(-1px); } .discern-table-of-contents a:hover, .discern-table-of-contents a:focus-visible, .discern-table-of-contents__item--current a { border-inline-start-color: var(--discern-color-accent-600); background: var(--discern-color-accent-100); color: var(--discern-color-ink); outline: none; } .discern-table-of-contents a:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: -0.125rem; } .discern-table-of-contents a span { color: var(--discern-color-accent-700); } .discern-table-of-contents__item--nested a { grid-template-columns: minmax(0, 1fr); padding-inline-start: calc( var(--discern-space-3) + var(--discern-space-6) + var(--discern-space-2) ); } .discern-table-of-contents__progress { margin-block-start: var(--discern-space-5); padding-block-start: var(--discern-space-4); border-block-start: 1px dashed var(--discern-color-border-strong); color: var(--discern-color-ink-faint); } @container discern-table-of-contents (max-width: 45rem) { .discern-table-of-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); border-inline-start: 0; } .discern-table-of-contents a { border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-sm); transform: none; } .discern-table-of-contents__progress { display: none; } } @container discern-table-of-contents (max-width: 28.75rem) { .discern-table-of-contents ol { grid-template-columns: 1fr; } } } @layer discern.components { .discern-prose { --discern-prose-gap: var(--discern-rhythm-group); display: flow-root; max-width: var(--discern-measure); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-md); line-height: var(--discern-leading-body); /* The parent owns outer rhythm regardless of child stylesheet order. */ & > :nth-child(n) { margin-block: var(--discern-prose-gap) 0; } & > :where(figure, blockquote):not(.discern-pull-quote--wide) { margin-inline: 0; } & > :where(blockquote, figure, aside, section, pre, h3, .discern-anchor-heading:has(> h3)), & > :where(blockquote, figure, aside, section, pre) + * { --discern-prose-gap: var(--discern-space-8); } & > :where(h1, h2, h3, h4, h5, h6), & :where(sup[id], sup > a[id]) { scroll-margin-block-start: var(--discern-space-4); } & > :where(h2, .discern-anchor-heading:has(> h2)) { --discern-prose-gap: var(--discern-rhythm-section); padding-block-start: var(--discern-space-5); border-block-start: 1px solid var(--discern-color-border-strong); } & > :where(h1, h2, h3, h4, h5, h6, .discern-anchor-heading) + * { --discern-prose-gap: var(--discern-space-4); } & > :first-child { --discern-prose-gap: 0px; } & > :where(h2, .discern-anchor-heading:has(> h2)):first-child { padding-block-start: 0; border-block-start: 0; } & > :where(ul, ol):not([class]) { padding-inline-start: var(--discern-space-6); & > li { padding-inline-start: var(--discern-space-2); & + li { margin-block-start: var(--discern-space-2); } &::marker { color: var(--discern-color-accent-600); } } } & > p a { text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; } & > p code { padding: calc(var(--discern-space-1) / 2) calc(var(--discern-space-1) * 1.5); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-xs); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); font-family: var(--discern-font-mono); font-size: 0.84em; } & > hr { height: 1px; --discern-prose-gap: var(--discern-rhythm-section); border: 0; background: var(--discern-color-border-strong); } & > small, & > p small { color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } } .discern-prose--narrow { max-width: 52ch; } .discern-prose--wide { max-width: 74ch; } .discern-prose--lead > p:first-child { color: var(--discern-color-ink); font-family: var(--discern-font-display); font-size: 1.3rem; line-height: 1.45; } .discern-prose--drop-cap > p:first-child::first-letter { float: left; margin: 0 calc(var(--discern-space-1) / 2) 0 0; color: var(--discern-color-accent-700); font-family: var(--discern-font-display); font-size: 4.4em; font-weight: var(--discern-font-weight-display); line-height: 0.72; } } @layer discern.components { .discern-markdown { min-inline-size: 0; overflow-wrap: anywhere; } .discern-markdown :where(img) { max-inline-size: 100%; block-size: auto; } .discern-markdown__footnote-reference { line-height: 0; } .discern-markdown__footnote-reference > a { display: inline-flex; min-inline-size: 1.5rem; min-block-size: 1.5rem; align-items: center; justify-content: center; font-size: var(--discern-font-size-xs); } } @layer discern.components { .discern-paragraph { max-width: var(--discern-measure); margin-block: 0 var(--discern-space-6); color: var(--discern-color-ink-muted); font-family: var(--discern-font-body); font-size: var(--discern-font-size-md); line-height: var(--discern-leading-body); } .discern-paragraph:last-child { margin-block-end: 0; } } @layer discern.components { .discern-list { max-inline-size: var(--discern-measure); margin-block: 0 var(--discern-space-6); padding-inline-start: var(--discern-space-6); color: var(--discern-color-ink-muted); font-family: var(--discern-font-body); font-size: var(--discern-font-size-md); line-height: var(--discern-leading-body); } .discern-list:last-child { margin-block-end: 0; } .discern-list__item, .discern-list__content, .discern-list__blocks, .discern-list__block { min-inline-size: 0; } .discern-list__item { padding-inline-start: var(--discern-space-1); } .discern-list__item::marker { color: var(--discern-color-ink-faint); } .discern-list--tight > .discern-list__item + .discern-list__item { margin-block-start: var(--discern-space-1); } .discern-list--loose > .discern-list__item + .discern-list__item { margin-block-start: var(--discern-space-4); } .discern-list__content { display: inline-flex; gap: var(--discern-space-2); align-items: baseline; } .discern-list__item--task { list-style: none; } .discern-list__task-marker { flex: none; inline-size: 1em; block-size: 1em; margin: 0; accent-color: var(--discern-color-accent-700); opacity: 1; } .discern-list__blocks { display: grid; gap: var(--discern-space-2); margin-block-start: var(--discern-space-2); } .discern-list--loose > .discern-list__item > .discern-list__blocks { gap: var(--discern-space-4); margin-block-start: var(--discern-space-4); } .discern-list__block > :where(p, ul, ol, blockquote, pre, .discern-list) { margin-block: 0; } } @layer discern.components { .discern-key-points { container: discern-key-points / inline-size; margin-block: var(--discern-space-10); overflow: hidden; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-accent-100); box-shadow: var(--discern-shadow-card); } .discern-key-points--sunken { background: var(--discern-color-surface-sunken); } .discern-key-points--contrast { border-color: var(--discern-color-inverse-surface); background: var(--discern-color-inverse-surface); color: var(--discern-color-inverse-ink); } .discern-key-points > header { display: grid; grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1.55fr); gap: var(--discern-space-5); align-items: end; padding: var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border-strong); } .discern-key-points > header > span, .discern-key-points li h3 { font-family: var(--discern-font-ui); } .discern-key-points > header > span { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-key-points > header h2 { margin: 0; font-size: var(--discern-font-size-display-md); } .discern-key-points--contrast > header h2, .discern-key-points--contrast > header > span { color: var(--discern-color-inverse-ink); } .discern-key-points ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0; padding: 0; background: var(--discern-color-surface-sunken); list-style: none; } .discern-key-points--accent ol { background: color-mix(in oklab, var(--discern-color-accent-100) 52%, var(--discern-color-surface)); } .discern-key-points--contrast ol { background: color-mix(in oklab, var(--discern-color-inverse-ink) 7%, var(--discern-color-inverse-surface)); } .discern-key-points li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--discern-space-3); padding: var(--discern-space-6); } .discern-key-points li + li { border-inline-start: 1px solid var(--discern-color-border-strong); } .discern-key-points li > span { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); } .discern-key-points li h3 { margin-block-end: var(--discern-space-2); font-size: var(--discern-font-size-sm); } .discern-key-points--contrast li h3, .discern-key-points--contrast li > span { color: var(--discern-color-inverse-ink); } .discern-key-points li div div { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-key-points li div div > :last-child { margin-block-end: 0; } .discern-key-points--contrast li div div { color: color-mix(in oklab, var(--discern-color-inverse-ink) 72%, transparent); } @container discern-key-points (max-width: 41.25rem) { .discern-key-points > header, .discern-key-points ol { grid-template-columns: 1fr; } .discern-key-points li + li { border-block-start: 1px solid var(--discern-color-border-strong); border-inline-start: 0; } } } @layer discern.components { .discern-blockquote { max-width: var(--discern-measure); margin-block: var(--discern-space-8); margin-inline: 0; padding-inline-start: var(--discern-space-5); border-inline-start: 1px solid var(--discern-color-border-strong); color: var(--discern-color-ink-muted); } .discern-blockquote > :first-child { margin-block-start: 0; } .discern-blockquote > :last-child { margin-block-end: 0; } } @layer discern.components { .discern-pull-quote { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--discern-space-4); margin-block: var(--discern-space-12); margin-inline: 0; padding: var(--discern-space-8); border-block: 1px solid var(--discern-color-border-strong); color: var(--discern-color-ink); } .discern-pull-quote--wide { width: min(calc(100% + 8rem), calc(var(--discern-page-max) - 8rem)); margin-inline: max(calc(var(--discern-space-16) * -1), calc((100% - var(--discern-page-max)) / 2)); } .discern-pull-quote__mark { grid-column: 1; grid-row: 1; color: var(--discern-color-accent-300); font-family: var(--discern-font-display); font-size: var(--discern-font-size-display-lg); line-height: 1; } .discern-pull-quote blockquote { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--discern-font-display); font-size: clamp(1.6rem, 4vw, 2.45rem); font-style: italic; font-weight: var(--discern-font-weight-display); line-height: 1.18; text-wrap: balance; } .discern-pull-quote blockquote > :last-child { margin-block-end: 0; } .discern-pull-quote figcaption { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--discern-space-2) var(--discern-space-4); align-items: baseline; margin-block-start: var(--discern-space-5); color: var(--discern-color-ink-faint); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-pull-quote figcaption strong { color: var(--discern-color-ink); } .discern-pull-quote cite { font-style: normal; } @media (max-width: 51.25rem) { .discern-pull-quote--wide { width: 100%; margin-inline: 0; } } } @layer discern.components { .discern-callout { --discern-callout-fill: var(--discern-color-accent-100); --discern-callout-text: var(--discern-color-accent-700); overflow-wrap: anywhere; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--discern-space-4); margin-block: var(--discern-space-8); padding: var(--discern-space-6); border: 1px solid var(--discern-color-border-strong); border-inline-start: 0.25rem solid var(--discern-color-accent-500); border-radius: var(--discern-radius-md); background: var(--discern-callout-fill); } .discern-callout--note { --discern-callout-fill: var(--discern-color-surface-sunken); } .discern-callout--warning { --discern-callout-fill: var(--discern-color-warning-soft); --discern-callout-text: var(--discern-color-warning-deep); border-inline-start-color: var(--discern-color-warning); } .discern-callout--success { --discern-callout-fill: var(--discern-color-success-soft); --discern-callout-text: var(--discern-color-success-deep); border-inline-start-color: var(--discern-color-success); } .discern-callout__icon, .discern-callout__eyebrow, .discern-callout h3 { font-family: var(--discern-font-ui); } .discern-callout__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--discern-color-border-strong); border-radius: 50%; color: var(--discern-callout-text); font-size: var(--discern-font-size-xs); } .discern-callout__eyebrow { color: var(--discern-callout-text); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-callout h3 { font-size: var(--discern-font-size-sm); } .discern-callout__icon > :where(svg, img) { max-inline-size: 100%; max-block-size: 100%; } .discern-callout__body { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } } @layer discern.components { .discern-code-block { max-width: 100%; margin-block: var(--discern-space-6); overflow: auto; overscroll-behavior: contain; padding: var(--discern-space-4) var(--discern-space-5); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); font: var(--discern-font-size-sm)/var(--discern-leading-body) var(--discern-font-mono); scrollbar-width: thin; tab-size: 4; white-space: pre; } .discern-code-block--wrap { white-space: break-spaces; overflow-wrap: anywhere; } .discern-code-block:first-child { margin-block-start: 0; } .discern-code-block:last-child { margin-block-end: 0; } .discern-code-block > code { color: inherit; font: inherit; } } @layer discern.components { .discern-code-listing { margin-block: var(--discern-space-10); margin-inline: 0; min-width: 0; overflow: hidden; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); box-shadow: var(--discern-shadow-window); } .discern-code-listing__header, .discern-code-listing figcaption { background: var(--discern-color-surface); color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); overflow-wrap: anywhere; } .discern-code-listing__header { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); align-items: center; min-height: 2.7rem; padding: var(--discern-space-2) var(--discern-space-4); border-block-end: 1px solid var(--discern-color-border-strong); font-size: var(--discern-font-size-xs); } .discern-code-listing__header strong { flex: 1 1 10rem; font-weight: var(--discern-font-weight-body); } .discern-code-listing__header > * { min-width: 0; max-width: 100%; } .discern-code-listing__header small { color: var(--discern-color-ink-faint); font-size: inherit; } .discern-code-listing__body { margin: 0; overflow: auto; padding-block: var(--discern-space-4); font: var(--discern-font-size-xs)/1.72 var(--discern-font-mono); tab-size: 2; } .discern-code-listing__body > code { display: block; width: max-content; min-width: 100%; font: inherit; } .discern-code-listing--wrap .discern-code-listing__body > code { width: auto; } .discern-code-listing--wrap .discern-code-listing__line { white-space: break-spaces; overflow-wrap: anywhere; } .discern-code-listing__line { display: block; position: relative; min-height: 1lh; padding-inline: calc(var(--discern-space-16) + var(--discern-space-1)) var(--discern-space-6); white-space: pre; } .discern-code-listing__line::before { position: absolute; inset-inline-start: var(--discern-space-4); width: 2.2rem; user-select: none; color: var(--discern-color-ink-faint); content: attr(data-line) / ""; text-align: end; } .discern-code-listing__line--highlighted { background: var(--discern-color-accent-100); } .discern-code-listing__line--highlighted::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; border-inline-start: 0.125rem solid var(--discern-color-accent-500); } .discern-code-listing figcaption { padding: var(--discern-space-3) var(--discern-space-5); border-block-start: 1px solid var(--discern-color-border-strong); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-code-listing--showcase { --discern-color-surface-sunken: var(--discern-color-inverse-surface); --discern-color-surface: color-mix(in oklab, var(--discern-color-inverse-ink) 6%, var(--discern-color-inverse-surface)); --discern-color-border-strong: color-mix(in oklab, var(--discern-color-inverse-ink) 16%, transparent); --discern-color-ink: color-mix(in oklab, var(--discern-color-inverse-ink) 90%, transparent); --discern-color-ink-muted: color-mix(in oklab, var(--discern-color-inverse-ink) 76%, transparent); --discern-color-ink-faint: color-mix(in oklab, var(--discern-color-inverse-ink) 58%, transparent); --discern-color-accent-100: color-mix(in oklab, var(--discern-color-ink) 19%, transparent); --discern-code-literal: var(--discern-color-inverse-ink); margin-block: 0; border-radius: clamp(1.25rem, 3vw, 2rem); } .discern-code-listing--showcase :focus-visible { outline-color: var(--discern-color-inverse-ink); } @media (forced-colors: active) { .discern-code-listing__body:focus-visible { outline-offset: -0.125rem !important; } } } @layer discern.components { .discern-data-figure { container: discern-data-figure / inline-size; margin-block: var(--discern-space-10); overflow: hidden; border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-card); } .discern-data-figure--sunken { background: var(--discern-color-surface-sunken); } .discern-data-figure > header { display: flex; justify-content: space-between; gap: var(--discern-space-5); align-items: end; padding: var(--discern-space-5) var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border); } .discern-data-figure > header span, .discern-data-figure > header h3, .discern-data-figure > header ul, .discern-data-figure figcaption small { font-family: var(--discern-font-ui); } .discern-data-figure > header span, .discern-data-figure > header ul, .discern-data-figure figcaption small { font-size: var(--discern-font-size-xs); } .discern-data-figure > header span { display: block; margin-block-end: var(--discern-space-1); color: var(--discern-color-accent-700); font-weight: var(--discern-font-weight-strong); } .discern-data-figure > header h3 { margin: 0; font-size: var(--discern-font-size-lg); } .discern-data-figure > header ul { display: flex; flex-wrap: wrap; gap: var(--discern-space-3); margin: 0; padding: 0; color: var(--discern-color-ink-faint); list-style: none; } .discern-data-figure > header li { display: inline-flex; align-items: center; gap: var(--discern-space-1); } .discern-data-figure > header i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 0.125rem; background: var(--discern-color-accent-500); } .discern-data-figure > header .discern-data-figure__swatch--ink { background: var(--discern-color-ink-muted); } .discern-data-figure > header .discern-data-figure__swatch--success { background: var(--discern-color-success); } .discern-data-figure > header .discern-data-figure__swatch--warning { background: var(--discern-color-warning); } .discern-data-figure > header .discern-data-figure__swatch--series-1 { border-radius: 50%; background: var(--discern-color-series-1); } .discern-data-figure > header .discern-data-figure__swatch--series-2 { background: var(--discern-color-series-2); } .discern-data-figure > header .discern-data-figure__swatch--series-3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--discern-color-series-3); } .discern-data-figure > header .discern-data-figure__swatch--series-4 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--discern-color-series-4); } .discern-data-figure > header .discern-data-figure__swatch--series-5 { clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--discern-color-series-5); } .discern-data-figure > header .discern-data-figure__swatch--series-6 { clip-path: polygon( 50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); background: var(--discern-color-series-6); } .discern-data-figure__visual { padding: var(--discern-space-6); } .discern-data-figure figcaption { display: grid; gap: var(--discern-space-1); padding: var(--discern-space-4) var(--discern-space-6); border-block-start: 1px solid var(--discern-color-border); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-data-figure figcaption small { color: var(--discern-color-ink-faint); } @container discern-data-figure (max-width: 38.75rem) { .discern-data-figure > header { align-items: flex-start; flex-direction: column; } } @media (forced-colors: active) { .discern-data-figure > header i { border: 1px solid var(--discern-color-ink); background: var(--discern-color-ink); } } } @layer discern.components { .discern-chart__viewport { contain: inline-size; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } .discern-chart__viewport:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: 0.125rem; } .discern-chart { display: block; block-size: auto; overflow: visible; background: transparent; shape-rendering: geometricPrecision; text-rendering: optimizeLegibility; } .discern-chart__canvas { fill: var(--discern-color-canvas); } .discern-chart__mark--series-1, .discern-chart__points--series-1, .discern-chart__area--series-1 { fill: var(--discern-color-series-1); } .discern-chart__mark--series-2, .discern-chart__points--series-2, .discern-chart__area--series-2 { fill: var(--discern-color-series-2); } .discern-chart__mark--series-3, .discern-chart__points--series-3, .discern-chart__area--series-3 { fill: var(--discern-color-series-3); } .discern-chart__mark--series-4, .discern-chart__points--series-4, .discern-chart__area--series-4 { fill: var(--discern-color-series-4); } .discern-chart__mark--series-5, .discern-chart__points--series-5, .discern-chart__area--series-5 { fill: var(--discern-color-series-5); } .discern-chart__mark--series-6, .discern-chart__points--series-6, .discern-chart__area--series-6 { fill: var(--discern-color-series-6); } .discern-chart__mark--ramp-1 { fill: var(--discern-color-accent-200); } .discern-chart__mark--ramp-2 { fill: var(--discern-color-accent-400); } .discern-chart__mark--ramp-3 { fill: var(--discern-color-accent-600); } .discern-chart__mark--ramp-4 { fill: var(--discern-color-accent-800); } .discern-chart__path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .discern-chart__path--series-1 { stroke: var(--discern-color-series-1); } .discern-chart__path--series-2 { stroke: var(--discern-color-series-2); } .discern-chart__path--series-3 { stroke: var(--discern-color-series-3); } .discern-chart__path--series-4 { stroke: var(--discern-color-series-4); } .discern-chart__path--series-5 { stroke: var(--discern-color-series-5); } .discern-chart__path--series-6 { stroke: var(--discern-color-series-6); } .discern-chart__axis { stroke: var(--discern-color-ink-faint); vector-effect: non-scaling-stroke; } .discern-chart__grid { stroke: var(--discern-color-border); vector-effect: non-scaling-stroke; } .discern-chart__reference { stroke: var(--discern-color-ink-muted); vector-effect: non-scaling-stroke; } .discern-chart__label { fill: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); } .discern-chart__label--annotation { fill: var(--discern-color-ink); } .discern-chart__label--mono { font-family: var(--discern-font-mono); } @media (forced-colors: active) { .discern-chart { forced-color-adjust: none; } .discern-chart__canvas { fill: var(--discern-color-canvas); } .discern-chart__mark, .discern-chart__area { fill: var(--discern-color-canvas); stroke: var(--discern-color-ink); stroke-width: 1; vector-effect: non-scaling-stroke; } .discern-chart__points { fill: var(--discern-color-canvas); stroke: var(--discern-color-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .discern-chart__path, .discern-chart__axis, .discern-chart__grid, .discern-chart__reference { stroke: var(--discern-color-ink); } .discern-chart__label { fill: var(--discern-color-ink); } } } @layer discern.components { .discern-diagram__viewport { contain: inline-size; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } .discern-diagram__viewport:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: 0.125rem; } .discern-diagram { display: block; block-size: auto; overflow: visible; background: transparent; shape-rendering: geometricPrecision; text-rendering: optimizeLegibility; } .discern-diagram__canvas { fill: var(--discern-color-canvas); } .discern-diagram__node, .discern-diagram__node-cue { stroke-width: 2; vector-effect: non-scaling-stroke; } .discern-diagram__node--ordinary { fill: var(--discern-color-surface); stroke: var(--discern-color-border-strong); } .discern-diagram__node--decision, .discern-diagram__node--focus { fill: var(--discern-color-surface); stroke: var(--discern-color-accent-500); } .discern-diagram__node--start { fill: var(--discern-color-surface); stroke: var(--discern-color-accent-700); } .discern-diagram__node--end, .discern-diagram__node--success { fill: var(--discern-color-surface); stroke: var(--discern-color-success); } .discern-diagram__node--warning { fill: var(--discern-color-surface); stroke: var(--discern-color-warning); } .discern-diagram__node-cue { fill: none; } .discern-diagram__region { fill: var(--discern-color-surface); fill-opacity: 0.42; stroke: var(--discern-color-border); stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; } .discern-diagram__text { fill: var(--discern-color-ink); font-family: var(--discern-font-ui); } .discern-diagram__text--quiet-annotation { fill: var(--discern-color-ink-muted); font-family: var(--discern-font-mono); } .discern-diagram__text--connector-label, .discern-diagram__arrowhead--primary { fill: var(--discern-color-ink-muted); } .discern-diagram__connector { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .discern-diagram__guide { fill: none; stroke: var(--discern-color-border); stroke-linecap: round; vector-effect: non-scaling-stroke; } .discern-diagram__guide--dashed { stroke-dasharray: 6 6; } .discern-diagram__connector--primary { stroke: var(--discern-color-ink-muted); } .discern-diagram__connector--secondary { stroke: var(--discern-color-ink-faint); stroke-dasharray: 8 6; } .discern-diagram__arrowhead--secondary { fill: var(--discern-color-ink-faint); } .discern-diagram__connector--return { stroke: var(--discern-color-accent-700); stroke-dasharray: 2 6; } .discern-diagram__arrowhead--return { fill: var(--discern-color-accent-700); } } @layer discern.components { .discern-timeline { container: discern-timeline / inline-size; margin-block: var(--discern-space-12); padding-block: var(--discern-space-8); border-block: 1px solid var(--discern-color-border-strong); } .discern-timeline > header { display: grid; grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1.4fr); gap: 0 var(--discern-space-6); margin-block-end: var(--discern-space-8); } .discern-timeline > header > span, .discern-timeline__content h3 { font-family: var(--discern-font-ui); } .discern-timeline > header > span, .discern-timeline__date, .discern-timeline__content small { font-size: var(--discern-font-size-xs); } .discern-timeline > header > span { grid-row: span 2; color: var(--discern-color-accent-700); font-weight: var(--discern-font-weight-strong); } .discern-timeline > header h2 { margin-block-end: var(--discern-space-2); font-size: var(--discern-font-size-display-md); } .discern-timeline > header div, .discern-timeline__content > div { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-timeline > header div > :last-child, .discern-timeline__content > div > :last-child { margin-block-end: 0; } .discern-timeline ol { margin: 0; padding: 0; list-style: none; } .discern-timeline li { display: grid; grid-template-columns: minmax(7rem, 0.6fr) 1.2rem minmax(0, 1.4fr); gap: var(--discern-space-4); min-height: 8rem; } .discern-timeline__date { padding-block-start: var(--discern-space-1); color: var(--discern-color-ink-faint); text-align: end; } .discern-timeline__marker { position: relative; display: block; } .discern-timeline__marker::before { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: var(--discern-color-border-strong); content: ""; } .discern-timeline__marker::after { position: absolute; inset-block-start: var(--discern-space-1); inset-inline-start: 50%; inline-size: 0.72rem; block-size: 0.72rem; border: 0.125rem solid var(--discern-color-accent-500); border-radius: 50%; background: var(--discern-color-canvas); content: ""; transform: translateX(-50%); } .discern-timeline__item--complete .discern-timeline__marker::after { background: var(--discern-color-success); border-color: var(--discern-color-success); } .discern-timeline__item--current .discern-timeline__marker::after { background: var(--discern-color-accent-500); outline: solid var(--discern-color-accent-100); outline-width: calc(var(--discern-space-1) * 1.25); } .discern-timeline__content { padding-block-end: var(--discern-space-8); } .discern-timeline__content h3 { margin-block-end: var(--discern-space-2); font-size: var(--discern-font-size-lg); } .discern-timeline__content small { display: block; margin-block-start: var(--discern-space-3); color: var(--discern-color-accent-700); } @container discern-timeline (max-width: 38.75rem) { .discern-timeline > header { grid-template-columns: 1fr; } .discern-timeline > header > span { grid-row: auto; margin-block-end: var(--discern-space-2); } .discern-timeline li { grid-template-columns: 1.2rem minmax(0, 1fr); } .discern-timeline__date { grid-column: 2; text-align: start; } .discern-timeline__marker { grid-row: 1 / span 2; } } } @layer discern.components { .discern-footnotes { margin-block: var(--discern-space-16) 0; padding-block-start: var(--discern-space-8); border-block-start: 0.125rem solid var(--discern-color-ink); } .discern-footnotes > header { display: flex; gap: var(--discern-space-3); align-items: baseline; margin-block-end: var(--discern-space-6); } .discern-footnotes > header > span { color: var(--discern-color-accent-600); font-family: var(--discern-font-display); font-size: var(--discern-font-size-display-md); } .discern-footnotes > header h2 { margin: 0; font-size: var(--discern-font-size-display-sm); } .discern-footnotes > ol { display: grid; gap: var(--discern-space-4); margin: 0; padding: 0; list-style: none; } .discern-footnotes > ol > li { scroll-margin-block-start: var(--discern-space-4); display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--discern-space-3); align-items: start; padding-block-end: var(--discern-space-4); border-block-end: 1px solid var(--discern-color-border); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-footnotes > ol > li > span { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); } .discern-footnotes > ol > li > div > :last-child { margin-block-end: 0; } .discern-footnotes > ol > li > div > :where(.discern-paragraph, .discern-list, .discern-blockquote) { font-size: inherit; } .discern-footnotes__returns { display: inline-flex; flex-wrap: wrap; gap: var(--discern-space-2); } .discern-footnotes > ol > li > a, .discern-footnotes__returns > a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.5rem; min-block-size: 1.5rem; color: var(--discern-color-ink-faint); text-decoration: none; } .discern-footnotes > ol > li > a:hover, .discern-footnotes > ol > li > a:focus-visible, .discern-footnotes__returns > a:hover, .discern-footnotes__returns > a:focus-visible { color: var(--discern-color-accent-700); } } @layer discern.components { .discern-related-content { padding-block: var(--discern-section-space); border-block: 1px solid var(--discern-color-border); background: var(--discern-color-surface-sunken); } .discern-related-content--canvas { background: var(--discern-color-canvas); } .discern-related-content__inner { width: min(100% - 2 * var(--discern-space-6), var(--discern-page-max)); margin-inline: auto; } .discern-related-content__inner > header { display: grid; grid-template-columns: minmax(8rem, 0.48fr) minmax(0, 1.52fr); gap: var(--discern-space-6); align-items: end; margin-block-end: var(--discern-space-8); } .discern-related-content__inner > header > span, .discern-related-content article > span, .discern-related-content article footer { font-family: var(--discern-font-ui); } .discern-related-content__inner > header > span, .discern-related-content article > span { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-related-content__inner > header h2 { margin: 0; } .discern-related-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--discern-color-border-strong); } .discern-related-content article { display: flex; min-width: 0; min-height: 20rem; padding: var(--discern-space-6); border-block-end: 1px solid var(--discern-color-border-strong); flex-direction: column; } .discern-related-content article + article { border-inline-start: 1px solid var(--discern-color-border-strong); } .discern-related-content article h3 { margin-block: var(--discern-space-5) var(--discern-space-4); font-size: var(--discern-font-size-display-sm); } .discern-related-content article h3 a { color: var(--discern-color-ink); text-decoration: none; } .discern-related-content article h3 a:hover, .discern-related-content article h3 a:focus-visible { color: var(--discern-color-accent-700); } .discern-related-content__description { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); } .discern-related-content__description > :last-child { margin-block-end: 0; } .discern-related-content article footer { display: flex; justify-content: space-between; gap: var(--discern-space-3); align-items: center; margin-block-start: auto; padding-block-start: var(--discern-space-6); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } .discern-related-content article footer > span:last-child { color: var(--discern-color-accent-700); font-weight: var(--discern-font-weight-strong); } @media (max-width: 47.5rem) { .discern-related-content__inner > header, .discern-related-content__grid { grid-template-columns: 1fr; } .discern-related-content article { min-height: 0; } .discern-related-content article + article { border-inline-start: 0; } } }