@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-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-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-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-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-hover-card { --discern-hover-card-width: 22rem; position: relative; display: inline-flex; max-inline-size: 100%; isolation: isolate; vertical-align: baseline; } .discern-hover-card--width-sm { --discern-hover-card-width: 16rem; } .discern-hover-card--width-lg { --discern-hover-card-width: 30rem; } .discern-hover-card__trigger { position: relative; z-index: 1; } .discern-hover-card__panel { position: absolute; z-index: 40; inline-size: min( var(--discern-hover-card-width), calc(100vw - 2 * var(--discern-space-4)) ); padding: var(--discern-space-5); border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-md); background: var(--discern-color-surface); box-shadow: var(--discern-shadow-pop); color: var(--discern-color-ink-muted); opacity: 0; overflow-wrap: anywhere; pointer-events: none; visibility: hidden; transition: opacity var(--discern-duration-fast) var(--discern-ease-out), translate var(--discern-duration-fast) var(--discern-ease-out), visibility 0s linear var(--discern-duration-fast); font-family: var(--discern-font-body); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); text-align: start; } .discern-hover-card--top .discern-hover-card__panel { inset-block-end: calc(100% + var(--discern-space-2)); translate: 0 var(--discern-space-1); } .discern-hover-card--bottom .discern-hover-card__panel { inset-block-start: calc(100% + var(--discern-space-2)); translate: 0 calc(-1 * var(--discern-space-1)); } .discern-hover-card--align-start .discern-hover-card__panel { inset-inline-start: 0; } .discern-hover-card--align-center .discern-hover-card__panel { inset-inline-start: 50%; } .discern-hover-card--top.discern-hover-card--align-center .discern-hover-card__panel { translate: -50% var(--discern-space-1); } .discern-hover-card--bottom.discern-hover-card--align-center .discern-hover-card__panel { translate: -50% calc(-1 * var(--discern-space-1)); } .discern-hover-card--align-end .discern-hover-card__panel { inset-inline-end: 0; } .discern-hover-card:is(:hover, :focus-within) .discern-hover-card__panel { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; } .discern-hover-card--align-center:is(:hover, :focus-within) .discern-hover-card__panel { translate: -50% 0; } .discern-hover-card:not(.discern-hover-card--align-center):is(:hover, :focus-within) .discern-hover-card__panel { translate: 0 0; } .discern-hover-card__panel::before { position: absolute; inset-inline: 0; block-size: var(--discern-space-2); content: ""; } .discern-hover-card--top .discern-hover-card__panel::before { inset-block-start: 100%; } .discern-hover-card--bottom .discern-hover-card__panel::before { inset-block-end: 100%; } .discern-hover-card__panel :where(h1, h2, h3, h4, h5, h6) { margin-block: 0 var(--discern-space-2); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-hover-card__panel :where(p, ul, ol) { margin-block: 0 var(--discern-space-3); } .discern-hover-card__panel :where(ul, ol) { padding-inline-start: var(--discern-space-5); } .discern-hover-card__panel :where(a) { color: var(--discern-color-accent-700); } .discern-hover-card__panel > :last-child { margin-block-end: 0; } @media (max-width: 35rem) { .discern-hover-card__panel { position: fixed; max-block-size: calc(100vh - 2 * var(--discern-space-4)); overflow-y: auto; } .discern-hover-card--align-start .discern-hover-card__panel, .discern-hover-card--align-center .discern-hover-card__panel, .discern-hover-card--align-end .discern-hover-card__panel { inset-inline: var(--discern-space-4); inline-size: auto; } .discern-hover-card--top .discern-hover-card__panel, .discern-hover-card--bottom .discern-hover-card__panel, .discern-hover-card--top.discern-hover-card--align-center .discern-hover-card__panel, .discern-hover-card--bottom.discern-hover-card--align-center .discern-hover-card__panel { inset-block: auto var(--discern-space-4); translate: 0 var(--discern-space-1); } .discern-hover-card--align-center:is(:hover, :focus-within) .discern-hover-card__panel { translate: 0 0; } .discern-hover-card__panel::before { display: none; } } .discern-hover-card .discern-hover-card__panel[data-discern-floating-enhanced] { position: fixed; inset: auto; inline-size: min( var(--discern-hover-card-width), calc(100vw - 2 * var(--discern-space-4)) ); max-block-size: calc(100dvh - 2 * var(--discern-space-4)); margin: 0; overflow-y: auto; translate: 0 0; } .discern-hover-card__panel[data-discern-floating-enhanced]::before { display: none; } @media (forced-colors: active) { .discern-hover-card__panel { border-color: var(--discern-color-ink); background: var(--discern-color-surface); color: var(--discern-color-ink); } } } @layer discern.components { .discern-breadcrumbs { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-breadcrumbs :is(ol, li, a) { display: inline-flex; align-items: center; } .discern-breadcrumbs ol { flex-wrap: wrap; max-inline-size: 100%; row-gap: var(--discern-space-2); margin: 0; padding: var(--discern-space-2) var(--discern-space-1); list-style: none; } .discern-breadcrumbs li { min-inline-size: 0; max-inline-size: 100%; } .discern-breadcrumbs a { min-inline-size: 0; min-block-size: 1.5rem; border-radius: var(--discern-radius-xs); color: inherit; text-decoration-color: transparent; text-underline-offset: 0.2em; } .discern-breadcrumbs a:hover { color: var(--discern-color-ink); text-decoration-color: var(--discern-color-accent-500); } .discern-breadcrumbs a:focus-visible { color: var(--discern-color-ink); } .discern-breadcrumbs__separator { flex: none; margin-inline: var(--discern-space-3); color: var(--discern-color-border-strong); } .discern-breadcrumbs .discern-breadcrumbs__current { display: block; color: var(--discern-color-ink); font-weight: var(--discern-font-weight-strong); } } @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-path-reference { display: inline-flex; gap: var(--discern-space-2); align-items: center; max-inline-size: 100%; min-inline-size: 0; vertical-align: middle; } .discern-path-reference__path { display: block; min-inline-size: 0; max-inline-size: 100%; padding: var(--discern-space-1) 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); font-family: var(--discern-font-mono); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-snug); } .discern-path-reference__prefix, .discern-path-reference__suffix { overflow-wrap: anywhere; white-space: pre-wrap; } .discern-path-reference__copy { flex: none; } } @layer discern.components { .discern-procedure { container: discern-procedure / inline-size; display: grid; gap: clamp(var(--discern-space-5), 4%, var(--discern-space-6)); min-inline-size: 0; margin-block-end: var(--discern-space-8); color: var(--discern-color-ink); } .discern-procedure * { min-inline-size: 0; } .discern-procedure__header { display: grid; gap: var(--discern-space-2); padding-block-end: var(--discern-space-5); border-block-end: 1px solid var(--discern-color-border-strong); } .discern-procedure__title { min-inline-size: 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-procedure__description { max-inline-size: var(--discern-measure); 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); overflow-wrap: anywhere; } .discern-procedure__description > :last-child, .discern-procedure__completion-copy > :last-child { margin-block-end: 0; } .discern-procedure__steps { display: grid; gap: var(--discern-space-6); margin: 0; padding-inline-start: var(--discern-space-6); } .discern-procedure__step { padding-inline-start: var(--discern-space-2); } .discern-procedure__step::marker { color: var(--discern-color-accent-700); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); } .discern-procedure__completion { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--discern-space-3) var(--discern-space-5); padding: var(--discern-space-4); border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); } .discern-procedure__completion-label { color: var(--discern-color-ink); 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-body); overflow-wrap: anywhere; } .discern-procedure__completion-copy { 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); } @container discern-procedure (max-width: 38.75rem) { .discern-procedure__steps { gap: var(--discern-space-5); padding-inline-start: var(--discern-space-5); } .discern-procedure__completion { grid-template-columns: minmax(0, 1fr); } } } @layer discern.components { .discern-procedure-step { container: discern-procedure-step / inline-size; display: grid; gap: var(--discern-space-4); min-inline-size: 0; padding-block-end: clamp( var(--discern-space-5), 4%, var(--discern-space-6) ); border-block-end: 1px solid var(--discern-color-border); color: var(--discern-color-ink); } .discern-procedure-step__header { display: grid; gap: var(--discern-space-2); min-inline-size: 0; } .discern-procedure-step__title, .discern-procedure-step__slot-label { font-family: var(--discern-font-ui); } .discern-procedure-step__title { min-inline-size: 0; margin: 0; font-size: var(--discern-font-size-lg); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-procedure-step__action, .discern-procedure-step__slot-copy { min-inline-size: 0; 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); overflow-wrap: anywhere; } .discern-procedure-step__action > :last-child, .discern-procedure-step__slot-copy > :last-child { margin-block-end: 0; } .discern-procedure-step__command, .discern-procedure-step__expected-result, .discern-procedure-step__branch { min-inline-size: 0; } .discern-procedure-step__criterion, .discern-procedure-step__recovery { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--discern-space-3); min-inline-size: 0; 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); } .discern-procedure-step__recovery { border-inline-start-color: var(--discern-color-warning); background: var(--discern-color-warning-soft); } .discern-procedure-step__slot-label { min-inline-size: 0; font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-body); overflow-wrap: anywhere; } .discern-procedure-step__recovery .discern-procedure-step__slot-label, .discern-procedure-step__recovery .discern-procedure-step__slot-copy { color: var(--discern-color-warning-deep); } @container discern-procedure-step (max-width: 38.75rem) { .discern-procedure-step__criterion, .discern-procedure-step__recovery { grid-template-columns: minmax(0, 1fr); } } } @layer discern.components { .discern-prerequisite-list { container: discern-prerequisite-list / inline-size; display: grid; gap: var(--discern-space-3); min-inline-size: 0; padding: var(--discern-space-4); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); } .discern-prerequisite-list__title, .discern-prerequisite-list__detail, .discern-prerequisite-list__state { font-family: var(--discern-font-ui); } .discern-prerequisite-list__title { font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-prerequisite-list__items { display: grid; gap: var(--discern-space-2); margin: 0; padding: 0; list-style: none; } .discern-prerequisite-list__item { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--discern-space-3); align-items: start; min-inline-size: 0; padding-block: var(--discern-space-2); } .discern-prerequisite-list__marker { display: grid; place-items: center; inline-size: var(--discern-space-5); block-size: var(--discern-space-5); border: 1px solid var(--discern-color-border-strong); border-radius: 50%; color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); line-height: 1; } .discern-prerequisite-list__item[data-discern-state="satisfied"] .discern-prerequisite-list__marker { color: var(--discern-color-success-deep); } .discern-prerequisite-list__body { display: grid; gap: var(--discern-space-1); min-inline-size: 0; } .discern-prerequisite-list__requirement { color: var(--discern-color-ink); font-family: var(--discern-font-body); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-prerequisite-list__detail, .discern-prerequisite-list__state { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); line-height: var(--discern-leading-snug); } .discern-prerequisite-list__state { font-weight: var(--discern-font-weight-strong); } [data-discern-state="unresolved"] > :where(.discern-prerequisite-list__marker, .discern-prerequisite-list__state) { color: var(--discern-color-warning-deep); } @container discern-prerequisite-list (max-width: 38.75rem) { .discern-prerequisite-list__item { grid-template-columns: max-content minmax(0, 1fr); } .discern-prerequisite-list__state { grid-column: 2; } } } @layer discern.components { .discern-branch-choice { display: grid; gap: var(--discern-space-3); min-inline-size: 0; color: var(--discern-color-ink); } .discern-branch-choice__title, .discern-branch-choice__label { font-family: var(--discern-font-ui); } .discern-branch-choice__title { font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-branch-choice__choices, .discern-branch-choice__paths { margin: 0; } .discern-branch-choice__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--discern-space-3); padding: 0; list-style: none; } .discern-branch-choice__choice { display: grid; grid-template-rows: max-content 1fr; gap: var(--discern-space-2); min-inline-size: 0; padding: var(--discern-space-3); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-surface); } .discern-branch-choice__label { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-branch-choice__paths { padding-inline-start: var(--discern-space-4); } .discern-branch-choice__path { min-inline-size: 0; font-family: var(--discern-font-body); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-branch-choice__path::marker { color: var(--discern-color-accent-700); content: "→ "; } .discern-branch-choice__path a { display: inline-flex; align-items: center; min-block-size: 1.5rem; overflow-wrap: anywhere; color: var(--discern-color-accent-700); text-underline-offset: 0.16em; } } @layer discern.components { .discern-result-summary { container: discern-result-summary / inline-size; display: grid; gap: var(--discern-space-4); max-inline-size: 100%; padding: var(--discern-space-5); border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-lg); background: var(--discern-color-surface); color: var(--discern-color-ink); font-family: var(--discern-font-ui); } .discern-result-summary__header { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--discern-space-4); align-items: start; } .discern-result-summary__state, .discern-result-summary__readings, .discern-result-summary__next strong, .discern-result-summary__machine { font-size: var(--discern-font-size-xs); } .discern-result-summary__state { padding: var(--discern-space-1) var(--discern-space-3); border: 1px solid var(--discern-color-border-strong); border-radius: var(--discern-radius-pill); background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); text-transform: uppercase; } .discern-result-summary__state[data-discern-state="passed"] { border-color: var(--discern-color-success); background: var(--discern-color-success-soft); color: var(--discern-color-success-deep); } .discern-result-summary__state[data-discern-state="failed"] { border-color: var(--discern-color-danger); background: var(--discern-color-danger-soft); color: var(--discern-color-danger); } .discern-result-summary__state[data-discern-state="blocked"] { border-color: var(--discern-color-warning); background: var(--discern-color-warning-soft); color: var(--discern-color-warning-deep); } .discern-result-summary__state[data-discern-state="declared"] { border-style: dashed; } .discern-result-summary__state[data-discern-state="unchanged"] { color: var(--discern-color-ink-muted); } .discern-result-summary__fact { font-family: var(--discern-font-body); font-size: var(--discern-font-size-md); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-result-summary__readings { display: flex; flex-wrap: wrap; gap: var(--discern-space-3) var(--discern-space-6); margin: 0; } .discern-result-summary__readings > div { display: flex; gap: var(--discern-space-2); align-items: baseline; } .discern-result-summary__readings dt { color: var(--discern-color-ink-muted); } .discern-result-summary__readings dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--discern-font-weight-strong); } .discern-result-summary__next { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--discern-space-3); color: var(--discern-color-ink); font-size: var(--discern-font-size-sm); line-height: var(--discern-leading-body); } .discern-result-summary__next strong { color: var(--discern-color-ink); } .discern-result-summary__machine { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--discern-space-3); align-items: center; justify-items: start; color: var(--discern-color-ink-muted); } @container discern-result-summary (max-width: 30rem) { .discern-result-summary__header, .discern-result-summary__next { grid-template-columns: minmax(0, 1fr); } .discern-result-summary__state { justify-self: start; } } } @layer discern.components { .discern-raw-output { max-inline-size: 100%; overflow: hidden; border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); background: var(--discern-color-surface); color: var(--discern-color-ink); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-raw-output__summary { display: flex; gap: var(--discern-space-2); align-items: baseline; flex-wrap: wrap; min-block-size: 2.5rem; padding: var(--discern-space-3) var(--discern-space-4); color: var(--discern-color-ink); cursor: pointer; list-style: none; } .discern-raw-output__summary::-webkit-details-marker { display: none; } .discern-raw-output__summary:focus-visible { outline-width: calc(var(--discern-space-1) * 0.75); outline-style: solid; outline-color: var(--discern-color-accent-800); outline-offset: calc(var(--discern-space-1) * -0.75); } .discern-raw-output[open] .discern-raw-output__summary { background: var(--discern-color-surface); } .discern-raw-output__summary:active { background: color-mix(in oklab, var(--discern-color-ink) 6%, var(--discern-color-surface)); } .discern-raw-output__marker { display: inline-grid; place-items: center; align-content: center; inline-size: 1rem; block-size: 1rem; color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); transition: transform var(--discern-duration-fast) var(--discern-ease-out); } .discern-raw-output[open] .discern-raw-output__marker { transform: rotate(90deg); } .discern-raw-output__subject { min-inline-size: 0; overflow-wrap: anywhere; } .discern-raw-output__extent, .discern-raw-output__state { color: var(--discern-color-ink-muted); } .discern-raw-output__state { margin-inline-start: auto; } .discern-raw-output__state::after { content: "Collapsed"; } .discern-raw-output[open] .discern-raw-output__state::after { content: "Expanded"; } .discern-raw-output__content { max-block-size: 20rem; margin: 0; overflow: auto; padding: var(--discern-space-4); border-block-start: 1px solid var(--discern-color-border); background: var(--discern-color-surface-sunken); 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-raw-output__content code { display: block; inline-size: max-content; min-inline-size: 100%; color: inherit; font: inherit; } @media (prefers-reduced-motion: reduce) { .discern-raw-output__marker { transition: none; } } @media (hover: hover) { .discern-raw-output__summary:hover { background: var(--discern-color-surface-sunken); } } } @layer discern.components { .discern-ownership-badge { white-space: nowrap; } .discern-ownership-badge[data-discern-ownership="generated"] { border-style: dashed; } .discern-ownership-badge[data-discern-ownership="project-owned"] { --discern-badge-bg: var(--discern-color-accent-100); --discern-badge-border: var(--discern-color-accent-300); --discern-badge-text: var(--discern-color-accent-800); } .discern-ownership-badge[data-discern-ownership="tool-owned"] { font-weight: var(--discern-font-weight-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-docs-header { position: sticky; top: 0; z-index: 30; border-block-end: 1px solid var(--discern-color-border); background: var(--discern-color-surface); font-family: var(--discern-font-ui); } .discern-docs-header__inner { display: flex; gap: var(--discern-space-5); align-items: center; max-inline-size: var(--discern-docs-header-max, var(--discern-page-max)); min-block-size: 3.25rem; margin-inline: auto; padding: var(--discern-space-2) var(--discern-space-5); } .discern-docs-header__brand { display: inline-flex; gap: var(--discern-space-3); align-items: center; color: var(--discern-color-ink); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); } .discern-docs-header__brand a { border-radius: var(--discern-radius-xs); color: inherit; text-decoration: none; } .discern-docs-header__middle { display: flex; flex: 1; gap: var(--discern-space-3); align-items: center; justify-content: flex-end; } .discern-docs-header__actions { display: inline-flex; gap: var(--discern-space-2); align-items: center; } } @layer discern.components { .discern-docs-layout { --discern-docs-layout-max: calc(var(--discern-page-max) + 10rem); --discern-docs-layout-navigation-size: 16.5rem; --discern-docs-layout-rail-size: 14.5rem; --discern-docs-layout-sticky-offset: 3.25rem; container: discern-docs-layout / inline-size; width: min(100% - 2 * var(--discern-space-5), var(--discern-docs-layout-max)); margin-inline: auto; } .discern-docs-layout__columns { display: flex; flex-direction: column; gap: 0 clamp(var(--discern-space-6), 4cqi, var(--discern-space-12)); } .discern-docs-layout__main { flex: 1; min-inline-size: 0; padding-block: var(--discern-space-8) var(--discern-space-20); } .discern-docs-layout__rail { display: none; } .discern-docs-layout__veil { position: fixed; inset: 0; z-index: 25; background: var(--discern-color-overlay); } [data-discern-docs-drawer-toggle][hidden] { display: none; } @container discern-docs-layout (max-width: 55.999rem) { .discern-docs-layout__navigation { --discern-docs-layout-drawer: 1; } :where([data-discern-docs-drawer-enhanced]) .discern-docs-layout__navigation { position: fixed; inset-block: var(--discern-docs-layout-sticky-offset) 0; inset-inline-start: 0; z-index: 26; inline-size: min(19rem, 84vw); padding: var(--discern-space-4) var(--discern-space-5); overflow-y: auto; border-inline-end: 1px solid var(--discern-color-border); background: var(--discern-color-canvas); translate: -103% 0; } [data-discern-docs-drawer] .discern-docs-layout__navigation { transition: translate var(--discern-duration-medium) var(--discern-ease-out), display var(--discern-duration-medium) allow-discrete; } [data-discern-docs-drawer="closed"] .discern-docs-layout__navigation { display: none; } [data-discern-docs-drawer="open"] .discern-docs-layout__navigation { translate: none; box-shadow: var(--discern-shadow-pop); @starting-style { translate: -103% 0; } } } @container discern-docs-layout (min-width: 56rem) { .discern-docs-layout__columns { flex-direction: row; align-items: start; } .discern-docs-layout__navigation, .discern-docs-layout__rail { position: sticky; inset-block-start: var(--discern-docs-layout-sticky-offset); flex: none; inline-size: var(--discern-docs-layout-navigation-size); max-block-size: calc(100dvh - var(--discern-docs-layout-sticky-offset)); padding-block: var(--discern-space-8) var(--discern-space-4); overflow-y: auto; } } @container discern-docs-layout (min-width: 76rem) { .discern-docs-layout__rail { display: block; inline-size: var(--discern-docs-layout-rail-size); } } } @layer discern.components { .discern-docs-nav { color: var(--discern-color-ink-muted); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-xs); } .discern-docs-nav__section { display: grid; gap: var(--discern-space-1); } .discern-docs-nav__section + .discern-docs-nav__section { margin-block-start: var(--discern-space-5); } .discern-docs-nav__title { display: block; margin-block-end: var(--discern-space-2); color: var(--discern-color-ink); letter-spacing: 0.08em; text-transform: uppercase; } .discern-docs-nav ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .discern-docs-nav ul a { display: block; padding: var(--discern-space-2) var(--discern-space-3); border-radius: var(--discern-radius-sm); color: inherit; line-height: 1.35; text-decoration: none; } .discern-docs-nav ul a:is(:hover, :focus-visible) { background: var(--discern-color-surface-sunken); color: var(--discern-color-ink); } .discern-docs-nav ul a:focus-visible { outline: 0.125rem solid var(--discern-color-accent-500); outline-offset: 0.0625rem; } .discern-docs-nav ul a:active { background: var(--discern-color-accent-200); } .discern-docs-nav ul a[aria-current] { background: var(--discern-color-accent-100); color: var(--discern-color-ink); font-weight: var(--discern-font-weight-strong); } } @layer discern.components { .discern-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--discern-space-4); container: discern-pager / inline-size; font-family: var(--discern-font-ui); } .discern-pager__link { display: grid; gap: var(--discern-space-1); padding: var(--discern-space-4) var(--discern-space-5); border: 1px solid var(--discern-color-border); border-radius: var(--discern-radius-md); color: var(--discern-color-ink); text-decoration: none; } .discern-pager__link--next { text-align: end; } .discern-pager__link:hover { border-color: var(--discern-color-accent-500); color: var(--discern-color-accent-700); } .discern-pager__link:active { background: var(--discern-color-accent-100); transform: translateY(0.0625rem); } .discern-pager__direction { color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; } .discern-pager__title { overflow: hidden; font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); text-overflow: ellipsis; white-space: nowrap; } @container discern-pager (max-width: 28.75rem) { .discern-pager__link { grid-column: 1 / -1; } .discern-pager > [aria-hidden="true"] { display: none; } } } @layer discern.components { .discern-search-palette { inline-size: min(40rem, 92vw); max-block-size: none; margin-block-start: 12vh; margin-inline: auto; padding: 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-pop); color: var(--discern-color-ink); font-family: var(--discern-font-ui); } .discern-search-palette::backdrop { background: var(--discern-color-overlay); backdrop-filter: blur(0.125rem); } .discern-search-palette[open] { animation: discern-search-palette-enter var(--discern-duration-medium) var(--discern-ease-out) both; } .discern-search-palette__field { display: flex; gap: var(--discern-space-3); align-items: center; padding: var(--discern-space-4) var(--discern-space-5); border-block-end: 1px solid var(--discern-color-border); } .discern-search-palette__field:focus-within { border-block-end-color: var(--discern-color-accent-500); } .discern-search-palette__icon, .discern-search-palette__input::placeholder { color: var(--discern-color-ink-faint); } .discern-search-palette__input { flex: 1; min-inline-size: 0; padding: 0; border: 0; background: transparent; color: var(--discern-color-ink); font-family: inherit; font-size: var(--discern-font-size-md); outline: none; } .discern-search-palette__close { min-block-size: 2rem; 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-sunken); color: var(--discern-color-ink-muted); font: inherit; cursor: pointer; } .discern-search-palette__close:hover { border-color: var(--discern-color-accent-500); color: var(--discern-color-ink); } .discern-search-palette__close:focus-visible { color: var(--discern-color-ink); } .discern-search-palette__close:active { background: var(--discern-color-accent-100); transform: translateY(0.0625rem); } .discern-search-palette__results { max-block-size: min(50vh, 24rem); padding: var(--discern-space-2); overflow-y: auto; } .discern-search-palette__list { display: grid; gap: var(--discern-space-1); margin: 0; padding: 0; list-style: none; } .discern-search-palette__result { display: grid; gap: calc(var(--discern-space-1) / 2); padding: var(--discern-space-3) var(--discern-space-4); border-radius: var(--discern-radius-sm); color: var(--discern-color-ink); cursor: pointer; text-decoration: none; } .discern-search-palette__result:is(:hover, :focus-visible, [aria-selected="true"]) { background: var(--discern-color-accent-100); color: var(--discern-color-accent-700); } .discern-search-palette__result:focus-visible { outline-offset: -0.125rem; } .discern-search-palette__result:active { background: var(--discern-color-accent-200); } .discern-search-palette__result-title { font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); } .discern-search-palette__result-context { color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-xs); } .discern-search-palette__empty { margin: 0; padding: var(--discern-space-8) var(--discern-space-5); color: var(--discern-color-ink-muted); font-size: var(--discern-font-size-sm); text-align: center; } .discern-search-palette__hint { display: flex; gap: var(--discern-space-4); align-items: center; padding: var(--discern-space-3) var(--discern-space-5); border-block-start: 1px solid var(--discern-color-border); color: var(--discern-color-ink-faint); font-size: var(--discern-font-size-xs); } @keyframes discern-search-palette-enter { from { opacity: 0; translate: 0 calc(-1 * var(--discern-space-2)); } } } @layer discern.components { .discern-anchor-heading { display: flex; gap: var(--discern-space-2); align-items: baseline; } .discern-anchor-heading > :is(h1, h2, h3, h4, h5, h6) { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; scroll-margin-block-start: var(--discern-space-4); } .discern-anchor-heading__anchor { display: inline-grid; place-items: center; min-inline-size: 1.5rem; min-block-size: 1.5rem; color: var(--discern-color-accent-600); font-weight: var(--discern-font-weight-body); text-decoration: none; opacity: 0; transition: opacity var(--discern-duration-fast) var(--discern-ease-out); } .discern-anchor-heading:hover .discern-anchor-heading__anchor, .discern-anchor-heading__anchor:focus-visible { opacity: 1; } .discern-anchor-heading__anchor:hover { color: var(--discern-color-accent-700); text-decoration: underline; text-underline-offset: 0.2em; } .discern-anchor-heading__anchor:focus-visible { border-radius: var(--discern-radius-xs); } @media (hover: none) { .discern-anchor-heading__anchor { opacity: 1; } } } @layer discern.components { .discern-kbd { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.6em; padding: calc(var(--discern-space-1) / 2) var(--discern-space-2); border: 1px solid var(--discern-color-border-strong); border-block-end-width: 0.125rem; 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: var(--discern-leading-tight); white-space: nowrap; } } @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-glossary-term__trigger { border-radius: var(--discern-radius-xs); color: inherit; font-style: inherit; cursor: help; } .discern-glossary-term__card { display: grid; gap: var(--discern-space-2); } .discern-glossary-term__term { color: var(--discern-color-ink); font-family: var(--discern-font-ui); font-size: var(--discern-font-size-sm); font-weight: var(--discern-font-weight-strong); line-height: var(--discern-leading-snug); } .discern-glossary-term__definition { color: var(--discern-color-ink-muted); } } @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; } } }