/* JSTOV design system, forematter theme. Vendored at StovBuilds/design-system; built by tools/build.mjs. */
:root,
[data-mode="light"] {
color-scheme: light;
--ds-ground:            #fafafa;   
--ds-ground-2:          #f4f4f4;   
--ds-surface:           #ffffff;   
--ds-surface-2:         #f3f3f3;   
--ds-surface-3:         #ececec;   
--ds-skeleton:          #e2e2e2;   
--ds-surface-raised:    #ffffff;   
--ds-surface-hover:     #f0f0f0;   
--ds-surface-pressed:   #ebebeb;   
--ds-surface-selected:  #e6e6e6;   
--ds-surface-inverse:   #111111;   
--ds-surface-inverse-hover: #262626; 
--ds-surface-polarity:  1;         
--ds-scrim:             rgba(0, 0, 0, .40);
--ds-scrim-filter:      none;      
--ds-ink:               #111111;   
--ds-ink-2:             #3d3d3d;   
--ds-ink-muted:         #6b6b6b;   
--ds-ink-faint:         #a3a3a3;   
--ds-ink-inverse:       #fafafa;   
--ds-ink-on-primary:    #ffffff;   
--ds-ink-on-accent:     #ffffff;   
--ds-rule-soft:         #ededed;   
--ds-rule-faint:        #f4f4f4;   
--ds-rule:              #e5e5e5;   
--ds-rule-strong:       #d4d4d4;   
--ds-border:            #d9d9d9;   
--ds-border-strong:     #bdbdbd;   
--ds-primary-fill:        #111111; 
--ds-primary-fill-hover:  #2a2a2a;
--ds-primary-border:      transparent;   
--ds-primary-highlight:   transparent;   
--ds-accent:              #2563eb; 
--ds-accent-hover:        #1d4fd8;
--ds-accent-ink:          #1e40af; 
--ds-accent-tint:         #e9effd; 
--ds-accent-soft:         #93b4f5; 
--ds-accent-2:            #7c5ee4; 
--ds-accent-2-ink:        #5b3fc4;
--ds-accent-2-tint:       #eee9fb;
--ds-success:       #15803d;  --ds-success-tint:  #e3f0e8;  --ds-success-ink:  #14703a;
--ds-danger:        #dc2626;  --ds-danger-tint:   #fbe5e5;  --ds-danger-ink:   #b91c1c;
--ds-warning:       #d97706;  --ds-warning-tint:  #faefe1;  --ds-warning-ink:  #9a4f00;
--ds-info:          #0369a1;  --ds-info-tint:     #e1edf4;  --ds-info-ink:     #075985;
--ds-success-line:  color-mix(in srgb, var(--ds-success) 35%, transparent);
--ds-danger-line:   color-mix(in srgb, var(--ds-danger)  35%, transparent);
--ds-warning-line:  color-mix(in srgb, var(--ds-warning) 35%, transparent);
--ds-info-line:     color-mix(in srgb, var(--ds-info)    35%, transparent);
--ds-ink-on-semantic: #ffffff;    
--ds-ink-on-warning:  #1a1200;    
--ds-data-1: #2f6fed;  --ds-data-1-tint: #e2ebfc;  --ds-data-1-ink: #2455bd;
--ds-data-2: #7c5ee4;  --ds-data-2-tint: #ede8fb;  --ds-data-2-ink: #6248b8;
--ds-data-3: #0f9d6b;  --ds-data-3-tint: #ddf1ea;  --ds-data-3-ink: #0b7751;
--ds-data-4: #da6c36;  --ds-data-4-tint: #fbebe4;  --ds-data-4-ink: #a6542c;   
--ds-data-5: #d23f7a;  --ds-data-5-tint: #f9e4ec;  --ds-data-5-ink: #b53669;
--ds-data-6: #ad861b;  --ds-data-6-tint: #f7f2e1;  --ds-data-6-ink: #7d6218;
--ds-data-7: #0e9aa7;  --ds-data-7-tint: #ddf1f3;  --ds-data-7-ink: #0b757f;
--ds-data-8: #8a6a4b;  --ds-data-8-tint: #efeae6;  --ds-data-8-ink: #7f6245;
--ds-chart-ramp-1: #1e40af; --ds-chart-ramp-2: #2f6fed; --ds-chart-ramp-3: #93b4f5;  
--ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .05);                    
--ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .08);                    
--ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);   
--ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
--ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .12);                   
--ds-overlay-fill:   rgba(0, 0, 0, .60);   
--ds-ink-on-overlay: #ffffff;              
--ds-glass-fill:     rgba(255, 255, 255, .35);
--ds-glass-border:   rgba(255, 255, 255, .55);
--ds-texture-color:  rgba(0, 0, 0, .06);
--ds-illustration-ground: #eef2f7;         
}
:root {
--ds-border-width:      1px;
--ds-ring-width:        2px;
--ds-ring-offset:       2px;
--ds-ring-outset:       0px;       
--ds-control-lip:   0px;                                             
--ds-radius-scale:  1;             
--ds-radius-pill:   9999px;
--ds-font-sans:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ds-font-serif:    ui-serif, Georgia, "Times New Roman", serif;
--ds-font-mono:     ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--ds-font-display:  var(--ds-font-sans);   
--ds-font-label:    var(--ds-font-sans);   
--ds-font-body-alt: var(--ds-font-sans);   
--ds-text-base:     14px;          
--ds-scale-xs: .786;  --ds-scale-sm: .857;  --ds-scale-lg: 1.143;  --ds-scale-xl: 1.429;
--ds-scale-2xl: 1.714; --ds-scale-3xl: 2.286; --ds-scale-display: 3.429;
--ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
--ds-display-weight: 600;          
--ds-heading-weight: 600;
--ds-display-tracking: -0.02em;
--ds-heading-tracking: -0.01em;
--ds-label-tracking: 0;            
--ds-label-tracking-upper: .08em;  
--ds-label-case:     none;         
--ds-control-case:   none;         
--ds-lh-tight: 1.05; --ds-lh-heading: 1.2; --ds-lh-body: 1.45; --ds-lh-prose: 1.6; --ds-lh-list: 1.25;
--ds-numeric:        tabular-nums; 
--ds-measure:        65ch;         
--ds-space-unit:     4px;          
--ds-density-scale:  1;            
--ds-control-h-base: 36px;         
--ds-field-gap:      8px;          
--ds-gutter-page:    clamp(16px, 4vw, 72px);
--ds-container-max:  1152px;
--ds-container-narrow: 640px;
--ds-container-prose:  720px;
--ds-container-content: 1088px;    
--ds-section-gap-units: 12;        
--ds-rail-inset:     24px;         
--ds-rail-w:         64px;         
--ds-sidebar-w:      256px;
--ds-inspector-w:    320px;
--ds-topbar-h:       56px;
--ds-sheet-inset:    12px;         
--ds-icon-size:      16px;         
--ds-icon-size-row:  20px;         
--ds-icon-size-rail: 24px;         
--ds-icon-stroke:    1.5px;
--ds-tap-target-min: 40px;
--ds-motion-scale:   1;            
--ds-ease-standard:  cubic-bezier(.2, 0, 0, 1);
--ds-ease-out:       cubic-bezier(0, 0, .2, 1);
--ds-ease-in:        cubic-bezier(.4, 0, 1, 1);
--ds-ambient-play:   running;      
--ds-ambient-motion: 1;            
--ds-glass-blur:     12px;
--ds-media-aspect:   16 / 9;
--ds-mock-fade:      96px;                 
--ds-z-sticky:   100;
--ds-z-scrim:    200;
--ds-z-modal:    210;
--ds-z-dropdown: 300;
--ds-z-popover:  310;
--ds-z-toast:    500;
--ds-z-tooltip:  600;
}
:root,
[data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band] {
--ds-ink-link:          var(--ds-accent);
--ds-ink-code:          var(--ds-ink-2);
--ds-ring:              var(--ds-accent);
--ds-border-selected:   var(--ds-accent);
--ds-accent-line:       var(--ds-accent);
--ds-live:              var(--ds-danger);
--ds-presence:          var(--ds-success);
--ds-selection-graph:   var(--ds-accent);
--ds-data-primary:      var(--ds-data-1);   
--ds-chart-grid:        var(--ds-rule-soft);
--ds-chart-comparison:  var(--ds-ink-faint);
--ds-line-art:          var(--ds-rule-strong);
--ds-card-bg:           var(--ds-surface);
--ds-card-border:       var(--ds-rule);
--ds-card-shadow:       0 0 0 0 transparent;   
--ds-shadow-lip:        inset 0 calc(-1 * var(--ds-control-lip)) 0 0 var(--ds-border-strong);
--ds-hover-bg:          var(--ds-surface-hover);   
--ds-hover-shadow:      0 0 0 0 transparent;
--ds-selected-bg:       var(--ds-surface-selected);
--ds-selected-ink:      var(--ds-ink);
--ds-selected-line:     transparent;
--ds-selected-weight:   var(--ds-weight-medium);
--ds-radius-xs:   calc(4px  * var(--ds-radius-scale));
--ds-radius-sm:   calc(6px  * var(--ds-radius-scale));
--ds-radius-md:   calc(8px  * var(--ds-radius-scale));
--ds-radius-lg:   calc(12px * var(--ds-radius-scale));
--ds-radius-xl:   calc(20px * var(--ds-radius-scale));
--ds-radius-button: var(--ds-radius-sm);          
--ds-media-radius:  var(--ds-radius-lg);
--ds-text-xs:      calc(var(--ds-text-base) * var(--ds-scale-xs));
--ds-text-sm:      calc(var(--ds-text-base) * var(--ds-scale-sm));
--ds-text-md:      var(--ds-text-base);
--ds-text-lg:      calc(var(--ds-text-base) * var(--ds-scale-lg));
--ds-text-xl:      calc(var(--ds-text-base) * var(--ds-scale-xl));
--ds-text-2xl:     calc(var(--ds-text-base) * var(--ds-scale-2xl));
--ds-text-3xl:     calc(var(--ds-text-base) * var(--ds-scale-3xl));
--ds-text-display: calc(var(--ds-text-base) * var(--ds-scale-display));
--ds-text-display-fluid: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4));
--ds-text-title-page:    var(--ds-text-2xl);
--ds-text-title-section: var(--ds-text-lg);
--ds-text-title-card:    var(--ds-text-md);
--ds-text-title-chapter: var(--ds-text-3xl);
--ds-space-0-5: calc(var(--ds-space-unit) * .5);
--ds-space-1:  calc(var(--ds-space-unit) * 1);
--ds-space-1-5: calc(var(--ds-space-unit) * 1.5);   
--ds-space-2:  calc(var(--ds-space-unit) * 2);
--ds-space-2-5: calc(var(--ds-space-unit) * 2.5);   
--ds-space-3:  calc(var(--ds-space-unit) * 3);
--ds-space-4:  calc(var(--ds-space-unit) * 4);
--ds-space-5:  calc(var(--ds-space-unit) * 5);
--ds-space-6:  calc(var(--ds-space-unit) * 6);
--ds-space-7:  calc(var(--ds-space-unit) * 7);      
--ds-space-8:  calc(var(--ds-space-unit) * 8);
--ds-space-10: calc(var(--ds-space-unit) * 10);
--ds-space-12: calc(var(--ds-space-unit) * 12);
--ds-space-16: calc(var(--ds-space-unit) * 16);
--ds-space-20: calc(var(--ds-space-unit) * 20);
--ds-space-24: calc(var(--ds-space-unit) * 24);
--ds-section-gap: calc(var(--ds-space-unit) * var(--ds-section-gap-units));
--ds-control-h:    calc(var(--ds-control-h-base) * var(--ds-density-scale));
--ds-control-h-sm: calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale));
--ds-control-h-lg: calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale));
--ds-row-h:        calc(var(--ds-control-h) + 4px);
--ds-card-pad:     calc(16px * var(--ds-density-scale));
--ds-card-gap:     calc(16px * var(--ds-density-scale));
--ds-field-pitch:  calc(16px * var(--ds-density-scale));   
--ds-control-pad-x: calc(12px * var(--ds-density-scale));
--ds-size-h:      var(--ds-control-h);
--ds-size-text:   var(--ds-text-md);
--ds-size-pad-x:  var(--ds-control-pad-x);
--ds-dur-fast: calc(120ms * var(--ds-motion-scale));
--ds-dur-base: calc(180ms * var(--ds-motion-scale));
--ds-dur-slow: calc(280ms * var(--ds-motion-scale));
}
:is(:root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band]):not([data-band="accent"]) {
--ds-band-accent:   var(--ds-accent);
--ds-band-ink:      var(--ds-ink-on-accent);
--ds-band-ink-away: rgb(from var(--ds-ink-on-accent) calc(255 - r) calc(255 - g) calc(255 - b));
}
@supports (width: round(1px, 1px)) {
:root,
[data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band] {
--ds-control-h:    round(calc(var(--ds-control-h-base) * var(--ds-density-scale)), 4px);
--ds-control-h-sm: round(calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)), 4px);
--ds-control-h-lg: round(calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)), 4px);
--ds-card-pad:     round(calc(16px * var(--ds-density-scale)), 4px);
--ds-card-gap:     round(calc(16px * var(--ds-density-scale)), 4px);
--ds-field-pitch:  round(calc(16px * var(--ds-density-scale)), 4px);
--ds-control-pad-x: round(calc(12px * var(--ds-density-scale)), 2px);
}
}
:root[data-mode="dark"],
:not(:root)[data-mode="dark"],
:not(:root)[data-band="dark"] {      
color-scheme: dark;
--ds-ground:            #0f0f10;
--ds-ground-2:          #141416;
--ds-surface:           #18181a;
--ds-surface-2:         #1f1f22;
--ds-surface-3:         #26262a;
--ds-skeleton:          #2e2e33;
--ds-surface-raised:    #1f1f22;   
--ds-surface-hover:     #222226;
--ds-surface-pressed:   #26262a;
--ds-surface-selected:  #2a2a2e;
--ds-surface-inverse:   #fafafa;
--ds-surface-inverse-hover: #e6e6e8;
--ds-scrim:             rgba(0, 0, 0, .60);
--ds-ink:               #f4f4f5;
--ds-ink-2:             #c9c9cc;
--ds-ink-muted:         #9d9da3;   
--ds-ink-faint:         #5e5e64;
--ds-ink-inverse:       #111111;
--ds-ink-on-primary:    #111111;
--ds-ink-on-accent:     #0b0b0c;
--ds-rule-soft:         #222226;
--ds-rule-faint:        #1c1c1f;
--ds-rule:              #2a2a2e;   
--ds-rule-strong:       #38383d;
--ds-border:            #303035;
--ds-border-strong:     #45454b;
--ds-primary-fill:        #f4f4f5;
--ds-primary-fill-hover:  #e2e2e4;
--ds-accent:              #6b9cff;
--ds-accent-hover:        #86adff;
--ds-accent-ink:          #b9ccff;
--ds-accent-tint:         #273043;
--ds-accent-soft:         #3b5fb8;
--ds-accent-2:            #a48cf5;
--ds-accent-2-ink:        #c7b8fa;
--ds-accent-2-tint:       #342f46;
--ds-success: #34c57f;  --ds-success-tint: #1e3b2e;  --ds-success-ink: #5fd79b;
--ds-danger:  #f26a6a;  --ds-danger-tint:  #44282a;  --ds-danger-ink:  #f58d8d;
--ds-warning: #f2b04a;  --ds-warning-tint: #443624;  --ds-warning-ink: #f6c473;
--ds-info:    #4fb3f0;  --ds-info-tint:    #233745;  --ds-info-ink:    #7ec8f5;
--ds-ink-on-semantic: #0b0b0c;
--ds-data-1: #6b9cff;  --ds-data-1-tint: #293248;  --ds-data-1-ink: #9dbcff;
--ds-data-2: #a48cf5;  --ds-data-2-tint: #342f46;  --ds-data-2-ink: #c1b1f8;
--ds-data-3: #3ecf95;  --ds-data-3-tint: #203d33;  --ds-data-3-ink: #6fdcb2;
--ds-data-4: #f5915b;  --ds-data-4-tint: #443027;  --ds-data-4-ink: #f8ac84;
--ds-data-5: #f06fa4;  --ds-data-5-tint: #432936;  --ds-data-5-ink: #f596bd;
--ds-data-6: #e2c04e;  --ds-data-6-tint: #403a24;  --ds-data-6-ink: #ebd07e;
--ds-data-7: #3fc7d4;  --ds-data-7-tint: #203b3f;  --ds-data-7-ink: #7cdae3;
--ds-data-8: #c3a184;  --ds-data-8-tint: #3a332f;  --ds-data-8-ink: #d6bda8;
--ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;
--ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .40);
--ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .50);
--ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);
--ds-overlay-fill:   rgba(0, 0, 0, .65);
--ds-glass-fill:     rgba(24, 24, 26, .55);
--ds-glass-border:   rgba(255, 255, 255, .14);
--ds-texture-color:  rgba(255, 255, 255, .06);
--ds-illustration-ground: #1c2129;
}
@media (prefers-color-scheme: dark) {
:root:not([data-mode="light"]) {
color-scheme: dark;
--ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22;
--ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226;
--ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60);
--ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64;
--ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c;
--ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b;
--ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4;
--ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8;
--ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46;
--ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b;
--ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d;
--ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473;
--ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c;
--ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff;
--ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8;
--ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2;
--ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84;
--ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd;
--ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e;
--ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3;
--ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8;
--ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;
--ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50);
--ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);
--ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14);
--ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129;
}
}
:root[data-density="compact"],     :not(:root)[data-density="compact"]     { --ds-density-scale: .85; }
:root[data-density="default"],     :not(:root)[data-density="default"]     { --ds-density-scale: 1; }
:root[data-density="comfortable"], :not(:root)[data-density="comfortable"] { --ds-density-scale: 1.2; }
:root[data-depth="tint"],            :not(:root)[data-depth="tint"]            { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="hairline"],        :not(:root)[data-depth="hairline"]        { --ds-card-bg: var(--ds-ground);  --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow"],          :not(:root)[data-depth="shadow"]          { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: var(--ds-shadow-card); }
:root[data-depth="tint-hairline"],   :not(:root)[data-depth="tint-hairline"]   { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow-hairline"], :not(:root)[data-depth="shadow-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: var(--ds-shadow-card); }
:root[data-selection="tint"],        :not(:root)[data-selection="tint"]        { --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink);           --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent"],      :not(:root)[data-selection="accent"]      { --ds-selected-bg: var(--ds-accent-tint);      --ds-selected-ink: var(--ds-accent-ink);    --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent-fill"], :not(:root)[data-selection="accent-fill"] { --ds-selected-bg: var(--ds-accent);           --ds-selected-ink: var(--ds-ink-on-accent); --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="underline"],   :not(:root)[data-selection="underline"]   { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="bar"],         :not(:root)[data-selection="bar"]         { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="invert"],      :not(:root)[data-selection="invert"]      { --ds-selected-bg: var(--ds-surface-inverse);  --ds-selected-ink: var(--ds-ink-inverse);   --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-buttons="sm"],   :not(:root)[data-buttons="sm"]   { --ds-radius-button: var(--ds-radius-sm); }
:root[data-buttons="pill"], :not(:root)[data-buttons="pill"] { --ds-radius-button: var(--ds-radius-pill); }
:root[data-labels="sentence"], :not(:root)[data-labels="sentence"] { --ds-label-case: none;      --ds-label-tracking: 0; }
:root[data-labels="upper"],    :not(:root)[data-labels="upper"]    { --ds-label-case: uppercase; --ds-label-tracking: var(--ds-label-tracking-upper); }
:root[data-controls="sentence"], :not(:root)[data-controls="sentence"] { --ds-control-case: none; }
:root[data-controls="title"],    :not(:root)[data-controls="title"]    { --ds-control-case: capitalize; }
:root[data-accent-scope="none"], :not(:root)[data-accent-scope="none"] {
--ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink);
--ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink);
}
:root[data-hover="tint"], :not(:root)[data-hover="tint"] { --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; }
:root[data-hover="lift"], :not(:root)[data-hover="lift"] { --ds-hover-bg: var(--ds-surface);       --ds-hover-shadow: var(--ds-shadow-lift); }
:root[data-ambient="off"], :not(:root)[data-ambient="off"] { --ds-ambient-play: paused; --ds-ambient-motion: 0; }
[data-band="tint"][data-band] {
--ds-ground:   var(--ds-surface-2);
--ds-ground-2: var(--ds-surface-3);
--ds-rule:     var(--ds-rule-strong);   
}
[data-band="accent"][data-band] {
--ds-ground:                var(--ds-band-accent);
--ds-ground-2:              color-mix(in srgb, var(--ds-band-accent) 96%, var(--ds-band-ink-away));
--ds-surface:               color-mix(in srgb, var(--ds-band-accent) 90%, var(--ds-band-ink-away));
--ds-surface-2:             color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));
--ds-surface-3:             color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
--ds-surface-hover:         color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
--ds-surface-pressed:       color-mix(in srgb, var(--ds-band-accent) 82%, var(--ds-band-ink-away));
--ds-surface-selected:      color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
--ds-skeleton:              color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
--ds-surface-inverse:       var(--ds-band-ink);
--ds-surface-inverse-hover: color-mix(in srgb, var(--ds-band-ink) 90%, var(--ds-band-accent));
--ds-ink:                   var(--ds-band-ink);
--ds-ink-2:                 color-mix(in srgb, var(--ds-band-ink) 96%, var(--ds-band-accent));
--ds-ink-muted:             color-mix(in srgb, var(--ds-band-ink) 94%, var(--ds-band-accent));
--ds-ink-faint:             color-mix(in srgb, var(--ds-band-ink) 60%, var(--ds-band-accent));
--ds-ink-inverse:           var(--ds-band-accent);
--ds-ink-on-primary:        var(--ds-band-accent);
--ds-ink-on-accent:         var(--ds-band-accent);
--ds-rule-faint:            color-mix(in srgb, var(--ds-band-ink)  8%, var(--ds-band-accent));
--ds-rule-soft:             color-mix(in srgb, var(--ds-band-ink) 12%, var(--ds-band-accent));
--ds-rule:                  color-mix(in srgb, var(--ds-band-ink) 18%, var(--ds-band-accent));
--ds-rule-strong:           color-mix(in srgb, var(--ds-band-ink) 26%, var(--ds-band-accent));
--ds-border:                color-mix(in srgb, var(--ds-band-ink) 22%, var(--ds-band-accent));
--ds-border-strong:         color-mix(in srgb, var(--ds-band-ink) 34%, var(--ds-band-accent));
--ds-primary-fill:          var(--ds-band-ink);
--ds-primary-fill-hover:    color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
--ds-primary-border:        transparent;
--ds-primary-highlight:     transparent;
--ds-accent:                var(--ds-band-ink);
--ds-accent-hover:          color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
--ds-accent-ink:            var(--ds-band-ink);
--ds-accent-tint:           color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));   
--ds-accent-soft:           color-mix(in srgb, var(--ds-band-ink) 45%, var(--ds-band-accent));
--ds-ink-link:              var(--ds-band-ink);
--ds-ring:                  var(--ds-band-ink);
--ds-border-selected:       var(--ds-band-ink);
--ds-accent-line:           var(--ds-band-ink);
--ds-selection-graph:       var(--ds-band-ink);
--ds-success-tint:          var(--ds-accent-tint);  --ds-success-ink: var(--ds-band-ink);  --ds-success-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
--ds-danger-tint:           var(--ds-accent-tint);  --ds-danger-ink:  var(--ds-band-ink);  --ds-danger-line:  color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
--ds-warning-tint:          var(--ds-accent-tint);  --ds-warning-ink: var(--ds-band-ink);  --ds-warning-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
--ds-info-tint:             var(--ds-accent-tint);  --ds-info-ink:    var(--ds-band-ink);  --ds-info-line:    color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
--ds-shadow-lift:           0 1px 2px  color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
--ds-shadow-card:           0 1px 3px  color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
--ds-shadow-float:          0 8px 24px color-mix(in srgb, var(--ds-band-ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
--ds-shadow-modal:          0 24px 80px color-mix(in srgb, var(--ds-band-ink) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
--ds-shadow-object:         0 4px 12px color-mix(in srgb, var(--ds-band-ink) 25%, transparent);
--ds-illustration-ground:   var(--ds-accent-tint);
--ds-texture-color:         color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
--ds-glass-fill:            color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
--ds-glass-border:          color-mix(in srgb, var(--ds-band-ink) 20%, transparent);
}
@media (prefers-reduced-motion: reduce) {
:root,
[data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band] {
--ds-motion-scale: 0;
--ds-ambient-play: paused;
--ds-ambient-motion: 0;   
}
}
[data-theme="forematter"],
[data-theme="forematter"] [data-mode="light"] {
--ds-ground:            #faf9f5;   
--ds-ground-2:          #f5f3ee;
--ds-surface:           #ffffff;   
--ds-surface-2:         #f1eee9;   
--ds-surface-3:         #e8e4dc;
--ds-surface-raised:    #ffffff;
--ds-surface-hover:     #f3f1ec;
--ds-surface-pressed:   #eae7e0;
--ds-surface-selected:  #e3e2da;
--ds-surface-inverse:   #14201a;   
--ds-scrim:             rgba(20, 32, 26, .40);
--ds-ink:               #1e2621;   
--ds-ink-2:             #333d37;
--ds-ink-muted:         #565d55;   
--ds-ink-faint:         #7c8279;   
--ds-ink-inverse:       #f4eee1;
--ds-ink-on-primary:    #ffffff;
--ds-ink-on-accent:     #ffffff;
--ds-ink-code:          #565d55;
--ds-rule-soft:         #eee8da;
--ds-rule:              #e6decb;   
--ds-rule-strong:       #d6ccb4;
--ds-border:            #d6ccb4;
--ds-border-strong:     #747c70;   
--ds-primary-fill:        #2c4936;
--ds-primary-fill-hover:  #243d2d;
--ds-accent:              #2c4936;
--ds-accent-hover:        #243d2d;
--ds-accent-ink:          #2c4936;   
--ds-ink-link:            #2c4936;
--ds-accent-tint:         #e5ece4;
--ds-accent-soft:         #a9bfae;
--ds-accent-2:            #3d6b9a;   
--ds-accent-2-ink:        #2f567e;
--ds-accent-2-tint:       #e6edf4;
--ds-ring:                #1e2621;
--ds-success: #3f7d4e;  --ds-success-tint: #e6efe8;  --ds-success-ink: #2f6a3f;
--ds-danger:  #b8412f;  --ds-danger-tint:  #f8e6e2;  --ds-danger-ink:  #9c3a2c;
--ds-warning: #b8862a;  --ds-warning-tint: #f8ecd2;  --ds-warning-ink: #6e4a10;
--ds-info:    #3d6b9a;  --ds-info-tint:    #e6edf4;  --ds-info-ink:    #2f567e;
--ds-data-1: #2c4936;  --ds-data-1-tint: #e5ece4;  --ds-data-1-ink: #2c4936;
--ds-data-2: #3d6b9a;  --ds-data-2-tint: #e6edf4;  --ds-data-2-ink: #2f567e;
--ds-data-3: #b47f1b;  --ds-data-3-tint: #f8f0e0;  --ds-data-3-ink: #7d5713;
--ds-data-4: #8b5e8f;  --ds-data-4-tint: #f0e8f1;  --ds-data-4-ink: #714a74;
--ds-data-5: #4c8f8a;  --ds-data-5-tint: #e6f0ef;  --ds-data-5-ink: #34716c;
--ds-data-6: #a95a6a;  --ds-data-6-tint: #f5e8eb;  --ds-data-6-ink: #8a4655;
--ds-data-7: #7a6f5a;  --ds-data-7-tint: #eeece7;  --ds-data-7-ink: #635a48;
--ds-data-8: #5b7a3a;  --ds-data-8-tint: #edf2e6;  --ds-data-8-ink: #46602b;
--ds-chart-ramp-1: #1f3527; --ds-chart-ramp-2: #2c4936; --ds-chart-ramp-3: #a9bfae;
--ds-shadow-card:   0 1px 2px rgba(20, 32, 26, .08);
--ds-shadow-float:  0 8px 32px rgba(20, 32, 26, .12), 0 0 0 1px rgba(20, 32, 26, .04);
--ds-shadow-modal:  0 24px 80px rgba(20, 32, 26, .18), 0 0 0 1px rgba(20, 32, 26, .04);
--ds-texture-color: rgba(30, 38, 33, .05);
--ds-radius-scale:  1.5;
--ds-media-radius:  var(--ds-radius-xl);
--ds-font-sans:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--ds-font-serif:    "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
--ds-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--ds-font-display:  var(--ds-font-serif);
--ds-font-label:    var(--ds-font-sans);
--ds-font-body-alt: var(--ds-font-sans);   
--ds-numeric:       normal;               
--ds-text-base:     16px;
--ds-display-weight:   500;
--ds-display-tracking: -0.015em;
--ds-heading-weight:   600;
--ds-label-case:       none;
--ds-label-tracking-upper: .08em;
--ds-label-tracking:   0;
--ds-space-unit:       8px;
--ds-density-scale:    1.2;
--ds-section-gap-units: 14;
--ds-container-max:    1160px;
--ds-card-bg:        var(--ds-surface);
--ds-card-border:    transparent;
--ds-card-shadow:    0 0 0 0 transparent;
--ds-radius-button:  var(--ds-radius-pill);
--ds-selected-bg:    var(--ds-surface-selected);
--ds-selected-ink:   var(--ds-ink);
--ds-selected-line:  transparent;
}
[data-theme="forematter"][data-surface="brand"],
[data-theme="forematter"] [data-surface="brand"] {
--ds-ground:            #f4eee1;   
--ds-ground-2:          #efe8d9;
--ds-surface-2:         #faf6ed;
--ds-surface-hover:     #f8f3e8;
}
:where([data-theme="forematter"]) :is([data-mode], [data-density], [data-depth], [data-selection], [data-buttons],
[data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band="tint"], [data-band="dark"], [data-band="accent"]) {
--ds-card-border:   transparent;
--ds-radius-button: var(--ds-radius-pill);
--ds-media-radius:  var(--ds-radius-xl);
}
[data-theme="forematter"][data-mode="dark"],
[data-theme="forematter"] [data-mode="dark"],
[data-theme="forematter"] [data-band="dark"] {
--ds-ground: #14201a; --ds-ground-2: #18251e; --ds-surface: #1c2a22; --ds-surface-2: #22322a; --ds-surface-3: #2a3b32;
--ds-surface-raised: #22322a; --ds-surface-hover: #22322a; --ds-surface-pressed: #2a3b32; --ds-surface-selected: #314439; --ds-surface-inverse: #f4eee1;
--ds-scrim: rgba(0, 0, 0, .60);
--ds-ink: #f4eee1; --ds-ink-2: #dcd6c8; --ds-ink-muted: #b0b8ae; --ds-ink-faint: #6f7a71; --ds-ink-inverse: #1e2621;
--ds-ink-on-primary: #14201a; --ds-ink-on-accent: #14201a; --ds-ink-code: #dcd6c8;
--ds-rule-soft: #1f2d25; --ds-rule: #2b3b32; --ds-rule-strong: #3a4c41; --ds-border: #34463b; --ds-border-strong: #7f8c82;
--ds-primary-fill: #f4eee1; --ds-primary-fill-hover: #e6dfcf;
--ds-accent: #9cc4a6; --ds-accent-hover: #b2d2ba; --ds-accent-ink: #b2d2ba; --ds-ink-link: #b2d2ba; --ds-accent-tint: #243a2c; --ds-accent-soft: #4f6f58;
--ds-accent-2: #8fb3da; --ds-accent-2-ink: #b3cbe6; --ds-accent-2-tint: #22303f;
--ds-ring: #f4eee1;
--ds-success: #6fb583; --ds-success-tint: #22342a; --ds-success-ink: #93cba2;
--ds-danger: #e4806f; --ds-danger-tint: #432825; --ds-danger-ink: #eea294;
--ds-warning: #dfab4e; --ds-warning-tint: #3f3524; --ds-warning-ink: #ebc47c;
--ds-info: #7ea4cf; --ds-info-tint: #24303d; --ds-info-ink: #a5c1df;
--ds-data-1: #9cc4a6; --ds-data-1-tint: #243a2c; --ds-data-1-ink: #b2d2ba;
--ds-data-2: #7ea4cf; --ds-data-2-tint: #24303d; --ds-data-2-ink: #a5c1df;
--ds-data-3: #dfab4e; --ds-data-3-tint: #3f3524; --ds-data-3-ink: #ebc47c;
--ds-data-4: #b48bb8; --ds-data-4-tint: #342a35; --ds-data-4-ink: #cbaace;
--ds-data-5: #6fb5af; --ds-data-5-tint: #223432; --ds-data-5-ink: #97cec9;
--ds-data-6: #cf8797; --ds-data-6-tint: #3b2a2e; --ds-data-6-ink: #dfa9b5;
--ds-data-7: #a89c86; --ds-data-7-tint: #322e29; --ds-data-7-ink: #c1b7a6;
--ds-data-8: #9dbb7a; --ds-data-8-tint: #2a3522; --ds-data-8-ink: #b8d09c;
--ds-chart-ramp-1: #b2d2ba; --ds-chart-ramp-2: #9cc4a6; --ds-chart-ramp-3: #4f6f58;
--ds-shadow-card: 0 1px 2px rgba(0, 0, 0, .40);
--ds-shadow-float: 0 8px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
--ds-texture-color: rgba(255, 255, 255, .05);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="forematter"][data-mode="dark"] { color-scheme: dark; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, fieldset, legend { margin: 0; }
ul, ol { padding: 0; }
ul[class], ol[class] { list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button, input, select, textarea, optgroup {
font: inherit;            
color: inherit;
letter-spacing: inherit;
margin: 0;
}
button, [role="button"], summary { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
textarea { resize: vertical; }
a { color: var(--ds-ink-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; height: 0; }
table { border-collapse: collapse; border-spacing: 0; }
:where(th) { text-align: inherit; font-weight: inherit; }
code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: .93em; }
::placeholder { color: var(--ds-ink-muted); opacity: 1; }
::selection { background: var(--ds-accent-tint); color: var(--ds-ink); }
[hidden] { display: none !important; }
body {
background: var(--ds-ground);
color: var(--ds-ink);
font-family: var(--ds-font-sans);
font-size: var(--ds-text-md);
line-height: var(--ds-lh-body);
font-weight: var(--ds-weight-regular);
font-variant-numeric: var(--ds-numeric);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100dvh;
overflow-x: clip;   
}
[data-theme]:not(:root), [data-mode]:not(:root) { background: var(--ds-ground); color: var(--ds-ink); }
.ds-display {
font-family: var(--ds-font-display);
font-size: var(--ds-text-display);
font-weight: var(--ds-display-weight);
letter-spacing: var(--ds-display-tracking);
line-height: var(--ds-lh-tight);
text-wrap: balance;
}
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
font-weight: var(--ds-heading-weight);
letter-spacing: var(--ds-heading-tracking);
line-height: var(--ds-lh-heading);
color: var(--ds-ink);
text-wrap: balance;
}
.ds-h1 { font-size: var(--ds-text-2xl); }   
.ds-h2 { font-size: var(--ds-text-xl); }    
.ds-h3 { font-size: var(--ds-text-lg); }    
.ds-h4 { font-size: var(--ds-text-md); }    
.ds-h1 { letter-spacing: var(--ds-display-tracking); }
.ds-body    { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); }
.ds-body-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); }
.ds-body-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }
.ds-label {
font-family: var(--ds-font-label);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-lh-list);
letter-spacing: var(--ds-label-tracking);
text-transform: var(--ds-label-case);
color: var(--ds-ink-muted);
}
.ds-eyebrow {
font-family: var(--ds-font-label);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-lh-list);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-ink-muted);
}
.ds-mono {
font-family: var(--ds-font-mono);
font-size: var(--ds-text-sm);
color: var(--ds-ink-code);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.ds-numeric { font-variant-numeric: tabular-nums; }
.ds-prose {
font-family: var(--ds-font-body-alt);
font-size: var(--ds-text-lg);
line-height: var(--ds-lh-prose);
max-width: var(--ds-measure);
color: var(--ds-ink-2);
}
.ds-prose > * + * { margin-block-start: 1em; }
.ds-prose :is(h1, h2, h3, h4) { font-family: var(--ds-font-sans); color: var(--ds-ink); line-height: var(--ds-lh-heading); }
.ds-prose a { color: var(--ds-ink-link); }
.ds-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-quote { font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }
.ds-two-tone { color: var(--ds-ink); }
.ds-two-tone .ds-muted { color: var(--ds-ink-muted); font-weight: inherit; }
.ds-ink       { color: var(--ds-ink); }
.ds-ink-2     { color: var(--ds-ink-2); }
.ds-muted     { color: var(--ds-ink-muted); }     
.ds-faint     { color: var(--ds-ink-faint); }     
.ds-strong    { font-weight: var(--ds-weight-semibold); }
.ds-medium    { font-weight: var(--ds-weight-medium); }
.ds-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tnum      { font-variant-numeric: tabular-nums; }
[data-size="sm"] { --ds-size-h: var(--ds-control-h-sm); --ds-size-text: var(--ds-text-sm); --ds-size-pad-x: calc(var(--ds-control-pad-x) - 2px); }
[data-size="md"] { --ds-size-h: var(--ds-control-h);    --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); }
[data-size="lg"] { --ds-size-h: var(--ds-control-h-lg); --ds-size-text: var(--ds-text-lg); --ds-size-pad-x: calc(var(--ds-control-pad-x) + 4px); }
.ds-control {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-height: var(--ds-size-h);
padding-inline: var(--ds-size-pad-x);
font-size: var(--ds-size-text);
line-height: var(--ds-lh-list);
border-radius: var(--ds-radius-sm);
border: var(--ds-border-width) solid var(--ds-border);
background: var(--ds-surface);
color: var(--ds-ink);
text-transform: var(--ds-control-case);
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
border-color var(--ds-dur-fast) var(--ds-ease-standard),
box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-control:hover { border-color: var(--ds-border-strong); }
.ds-control:disabled, .ds-control[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); }
:focus-visible {
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: var(--ds-ring-offset);
border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }
:is(input, textarea, select, .ds-control):focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); }
[data-ring="outset"]:focus-visible { outline-offset: var(--ds-ring-outset); }
.ds-hairline          { border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-hairline--soft    { border-block-start-color: var(--ds-rule-soft); }
.ds-hairline--strong  { border-block-start-color: var(--ds-rule-strong); }
.ds-hairline--dashed  { border-block-start-style: dashed; }   
.ds-hairline--dotted  { border-block-start-style: dotted; }   
hr.ds-hairline        { width: 100%; }
.ds-hairline-v        { border-inline-start: var(--ds-border-width) solid var(--ds-rule); align-self: stretch; }
.ds-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--ds-space-4)); }
.ds-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--ds-space-2)); }
.ds-row--between { justify-content: space-between; }
.ds-row--end     { justify-content: flex-end; }
.ds-row--nowrap  { flex-wrap: nowrap; }
.ds-grid  {
display: grid;
gap: var(--_gap, var(--ds-card-gap));
grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 240px), 100%), 1fr));
}
.ds-grid[data-cols="2"] { --_min: 320px; }
.ds-grid[data-cols="3"] { --_min: 240px; }
.ds-grid[data-cols="4"] { --_min: 200px; }
.ds-spacer { flex: 1 1 auto; }
.ds-container {
width: 100%;
max-width: var(--ds-container-max);
margin-inline: auto;
padding-inline: var(--ds-gutter-page);
}
.ds-container--narrow { max-width: var(--ds-container-narrow); }
.ds-container--prose  { max-width: var(--ds-container-prose); }
.ds-content { width: 100%; max-width: var(--ds-container-content); margin-inline: auto; padding-inline: var(--ds-gutter-page); }
.ds-surface {
background: var(--ds-card-bg);
border: var(--ds-border-width) solid var(--ds-card-border);
box-shadow: var(--ds-card-shadow);
border-radius: var(--ds-radius-md);
}
.ds-well { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); }   
.ds-demo {
padding: var(--ds-space-6) var(--ds-gutter-page);
border-block-end: var(--ds-border-width) solid var(--ds-rule);
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
min-width: 0;
}
.ds-demo::before {
content: attr(data-component) " · " attr(data-variant) " — " attr(data-title);
font-family: var(--ds-font-mono);
font-size: var(--ds-text-xs);
color: var(--ds-ink-muted);
letter-spacing: 0;
text-transform: none;
}
.ds-demo[data-title=""]::before, .ds-demo:not([data-title])::before { content: attr(data-component) " · " attr(data-variant); }
.ds-demo > * { min-width: 0; }
.ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.ds-demo__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: var(--ds-measure); }
.ds-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
.ds-sec:not([data-mode]):not([data-band]) + .ds-sec:not([data-mode]):not([data-band]) { padding-block-start: 0; }
.ds-accent-word { color: var(--ds-accent); }
.ds-text-input {
--_h:      var(--ds-size-h);           
--_pad-x:  var(--ds-size-pad-x);       
--_radius: var(--ds-radius-sm);        
--_w:      auto;                       
--_align:  start;                      
--_icon:   var(--ds-icon-size);        
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
width: var(--_w);
max-width: 100%;
min-width: 0;
min-height: var(--_h);
padding-inline: var(--_pad-x);
font-size: var(--ds-size-text);
line-height: var(--ds-lh-list);
color: var(--ds-ink);
background: var(--ds-surface);
border: var(--ds-border-width) solid var(--ds-border);
border-radius: var(--_radius);
transition: border-color var(--ds-dur-fast) var(--ds-ease-standard),
background-color var(--ds-dur-fast) var(--ds-ease-standard),
box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-text-input:hover { border-color: var(--ds-border-strong); }
.ds-text-input__control {
flex: 1 1 auto;
align-self: stretch;
width: 100%;
min-width: 0;
padding: 0;
border: 0;
margin: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: var(--_align);
text-overflow: ellipsis;
}
.ds-text-input__control::placeholder { color: var(--ds-ink-muted); opacity: 1; }   
.ds-text-input__control::-webkit-search-decoration,
.ds-text-input__control::-webkit-search-cancel-button { appearance: none; }
.ds-text-input__control:focus-visible {
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: var(--ds-ring-offset);
border-radius: var(--ds-radius-xs);
}
.ds-text-input__icon,
.ds-text-input__clear,
.ds-text-input__chevron { flex: none; color: var(--ds-ink-muted); }
.ds-text-input__icon { display: inline-flex; width: var(--_icon); height: var(--_icon); }
.ds-text-input__icon svg,
.ds-text-input__clear svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round; stroke-linejoin: round;
}
.ds-text-input__prefix { flex: none; color: var(--ds-ink-muted); white-space: nowrap; }
.ds-text-input__clear {
display: inline-flex; align-items: center; justify-content: center;
width:  calc(var(--ds-icon-size) + var(--ds-space-2));
height: calc(var(--ds-icon-size) + var(--ds-space-2));
margin-inline-end: calc(-1 * var(--ds-space-1));
padding: var(--ds-space-1);
border: 0; background: transparent; border-radius: var(--ds-radius-xs);
cursor: pointer;
}
.ds-text-input__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-text-input:has(> .ds-text-input__control:placeholder-shown) .ds-text-input__clear { display: none; }
.ds-text-input__unit {
flex: none; align-self: stretch;
display: inline-flex; align-items: center;
margin-inline-end: calc(-1 * var(--_pad-x));
padding-inline: var(--ds-space-3);
border-inline-start: var(--ds-border-width) solid var(--ds-border);
border-start-end-radius: calc(var(--_radius) - var(--ds-border-width));
border-end-end-radius:   calc(var(--_radius) - var(--ds-border-width));
background: var(--ds-surface-2);
color: var(--ds-ink-muted);
font-size: var(--ds-text-sm);
white-space: nowrap;
}
.ds-text-input__chevron {
width:  calc(var(--ds-icon-size) * .45);
height: calc(var(--ds-icon-size) * .45);
margin-inline-end: var(--ds-space-0-5);
border: 0 solid currentColor;
border-inline-end-width: var(--ds-icon-stroke);
border-block-end-width:  var(--ds-icon-stroke);
transform: translateY(-25%) rotate(45deg);
}
.ds-text-input__message {
display: block;
margin-block-start: var(--ds-space-1);
font-size: var(--ds-text-sm);
line-height: var(--ds-lh-body);
color: var(--ds-ink-muted);
}
@supports selector(:has(a)) {
.ds-text-input__control:focus-visible { outline: none; }
.ds-text-input:has(> .ds-text-input__control:focus-visible) {
border-color: var(--ds-ring);
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: calc(-1 * var(--ds-border-width));
}
.ds-text-input:has(> .ds-text-input__control[readonly]) {
background: var(--ds-surface-2);
border-color: transparent;
}
.ds-text-input:has(> .ds-text-input__control[readonly]) .ds-text-input__control { cursor: default; }
.ds-text-input:has(> .ds-text-input__control:disabled) {
color: var(--ds-ink-faint);
background: var(--ds-surface-3);
border-color: var(--ds-rule);
box-shadow: none;
cursor: not-allowed;
}
.ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control { cursor: not-allowed; }
.ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control::placeholder,
.ds-text-input:has(> .ds-text-input__control:disabled) :is(.ds-text-input__icon, .ds-text-input__prefix, .ds-text-input__unit, .ds-text-input__chevron) { color: var(--ds-ink-faint); }
.ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]) { border-color: var(--ds-danger); }
.ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]:focus-visible) {
border-color: var(--ds-danger);
outline-color: var(--ds-danger);
}
}
.ds-text-input[data-state="error"] { border-color: var(--ds-danger); }
.ds-text-input[data-state="hover"] { border-color: var(--ds-border-strong); }
.ds-text-input[data-state="focus"] {
border-color: var(--ds-ring);
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: calc(-1 * var(--ds-border-width));
}
.ds-text-input[aria-busy="true"]::after {
content: "";
flex: none;
width: var(--ds-icon-size);
height: var(--ds-icon-size);
border: 2px solid var(--ds-rule);
border-block-start-color: var(--ds-ink-muted);
border-radius: var(--ds-radius-pill);
animation: ds-text-input-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
.ds-text-input[aria-busy="true"] .ds-text-input__clear { display: none; }
@keyframes ds-text-input-spin { to { transform: rotate(360deg); } }
.ds-text-input[data-size] { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); }
.ds-text-input[data-variant="descript-tint-fill-right-aligned"] {
--_align: end;
background: var(--ds-surface-2);
border-color: transparent;
}
.ds-text-input[data-variant="descript-tint-fill-right-aligned"]:hover { background: var(--ds-surface-hover); border-color: transparent; }
.ds-text-input[data-variant="retool-hairline-32"] {
--_h: var(--ds-control-h-sm);
--_pad-x: calc(var(--ds-control-pad-x) - 2px);
--_radius: var(--ds-radius-xs);
font-size: var(--ds-text-sm);
}
.ds-text-input[data-variant="navattic-hairline-lip"] {
--_h: var(--ds-control-h-sm);
--_pad-x: calc(var(--ds-control-pad-x) - 2px);
box-shadow: var(--ds-shadow-lift);
}
.ds-text-input[data-variant="origin-large-rounded"] {
--_h: calc(var(--ds-control-h-lg) + var(--ds-space-6));   
--_pad-x: var(--ds-space-6);
--_radius: var(--ds-radius-lg);
--_icon: var(--ds-icon-size-row);
--_w: 100%;
gap: var(--ds-space-4);
font-size: var(--ds-text-xl);
border-color: var(--ds-border-strong);
}
.ds-text-input[data-variant="hsaj-full-width-48"] {
--_h: calc(var(--ds-control-h) + var(--ds-space-3));       
--_pad-x: var(--ds-space-4);
--_radius: var(--ds-radius-md);
--_w: 100%;
font-size: var(--ds-text-lg);
}
.ds-text-input[data-variant="hsajl-inline-label-row"] {
--_h: calc(var(--ds-row-h) + var(--ds-space-4));            
--_pad-x: var(--ds-space-5);
--_radius: 0;
--_w: 100%;
gap: var(--ds-space-6);
font-size: var(--ds-text-lg);
background: transparent;
border-width: 0 0 var(--ds-border-width);
border-color: var(--ds-rule);
}
.ds-text-input[data-variant="hsajl-inline-label-row"]:hover { border-color: var(--ds-rule-strong); }
.ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control { font-weight: var(--ds-weight-semibold); }
.ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control::placeholder { font-weight: var(--ds-weight-regular); }
.ds-text-input[data-variant="luma-modal-white-with-clear"] {
--_h: calc(var(--ds-control-h-lg) + var(--ds-space-1));     
--_pad-x: var(--ds-space-4);
--_radius: var(--ds-radius-md);
--_w: 100%;
font-size: var(--ds-text-lg);
border-color: transparent;
}
.ds-text-input[data-variant="luma-modal-white-with-clear"]:hover { border-color: var(--ds-rule); }
.ds-text-input[data-variant="perplexity-composer-strong-rule"] {
--_h: var(--ds-control-h-lg);
--_pad-x: var(--ds-space-4);
font-size: var(--ds-text-lg);
border-color: var(--ds-border-strong);
box-shadow: var(--ds-shadow-lift);
}
.ds-button-primary {
--_h:      var(--ds-size-h);                                  
--_pad-x:  calc(var(--ds-size-pad-x) + var(--ds-space-1));    
--_radius: var(--ds-radius-button);                           
--_w:      auto;                                              
--_gap:    var(--ds-space-2);                                 
--_icon:   var(--ds-icon-size);                               
--_lift:   0 0 0 0 transparent;                               
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_gap);
width: var(--_w);
max-width: 100%;
min-width: 0;
min-height: var(--_h);
padding-inline: var(--_pad-x);
padding-block: 0;
font-family: inherit;
font-size: var(--ds-size-text);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-lh-list);
letter-spacing: 0;
text-transform: var(--ds-control-case);        
text-decoration: none;
white-space: nowrap;
color: var(--ds-ink-on-primary);
background: var(--ds-primary-fill);
border: var(--ds-border-width) solid var(--ds-primary-border);
border-radius: var(--_radius);
box-shadow: inset 0 var(--ds-border-width) 0 0 var(--ds-primary-highlight), var(--_lift, var(--ds-shadow-lift));
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
border-color var(--ds-dur-fast) var(--ds-ease-standard),
box-shadow var(--ds-dur-fast) var(--ds-ease-standard),
color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-button-primary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-button-primary__icon {
flex: none;
display: inline-flex;
width: var(--_icon);
height: var(--_icon);
}
.ds-button-primary__icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;               
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round; stroke-linejoin: round;
}
.ds-button-primary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); }
.ds-button-primary__icon[data-slot="leading"]  { margin-inline-start: calc(-1 * var(--ds-space-0-5)); }
.ds-button-primary:hover,
.ds-button-primary[data-state="hover"] { background: var(--ds-primary-fill-hover); }
.ds-button-primary:active,
.ds-button-primary[data-state="pressed"] {
background: var(--ds-primary-fill-hover);
--_lift: 0 0 0 0 transparent;                  
box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--_lift, var(--ds-shadow-lift));
}
.ds-button-primary:focus-visible,
.ds-button-primary[data-state="focus"] {
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: var(--ds-ring-offset);
}
.ds-button-primary:disabled,
.ds-button-primary[aria-disabled="true"] {
color: var(--ds-ink-faint);
background: var(--ds-surface-3);
border-color: var(--ds-rule);
box-shadow: inset 0 0 0 0 transparent, var(--_lift, var(--ds-shadow-lift));
--_lift: 0 0 0 0 transparent;
cursor: not-allowed;
}
.ds-button-primary[aria-busy="true"] { pointer-events: none; }
.ds-button-primary[aria-busy="true"] > * { visibility: hidden; }
.ds-button-primary[aria-busy="true"]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: var(--_icon);
height: var(--_icon);
border: 2px solid transparent;
border-block-start-color: currentColor;
border-inline-end-color: currentColor;
border-radius: var(--ds-radius-pill);
animation: ds-button-primary-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-button-primary-spin { to { transform: rotate(360deg); } }
.ds-button-primary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); }
.ds-button-primary[data-size="sm"] { --_icon: var(--ds-icon-size); }
.ds-button-primary[data-size="lg"] { --_icon: var(--ds-icon-size-row); }
.ds-button-primary[data-variant="filled-ink"] {
color: var(--ds-ink-inverse);
background: var(--ds-surface-inverse);
border-color: transparent;
}
.ds-button-primary[data-variant="filled-ink"]:hover,
.ds-button-primary[data-variant="filled-ink"][data-state="hover"],
.ds-button-primary[data-variant="filled-ink"]:active {
background: color-mix(in srgb, var(--ds-surface-inverse) 86%, var(--ds-ink-inverse));
}
.ds-button-primary[data-variant="filled-accent"] {
color: var(--ds-ink-on-accent);
background: var(--ds-accent);
border-color: transparent;
}
.ds-button-primary[data-variant="filled-accent"]:hover,
.ds-button-primary[data-variant="filled-accent"][data-state="hover"],
.ds-button-primary[data-variant="filled-accent"]:active { background: var(--ds-accent-hover); }
.ds-button-primary[data-variant="full-width-terminal"] {
--_w: 100%;
--_h: calc(var(--ds-control-h-lg) + var(--ds-space-2));     
--_pad-x: var(--ds-space-6);
--_icon: var(--ds-icon-size-row);
font-size: var(--ds-text-lg);
font-weight: var(--ds-weight-semibold);
margin-block-start: calc(var(--ds-field-pitch) * 2.5);      
}
.ds-button-primary[data-variant="full-width-terminal"][data-align="center"] {
--_w: auto;
min-width: calc(var(--_h) * 4);                             
}
.ds-button-primary[data-variant="over-wide"] { min-width: calc(var(--_h) * 4); }
.ds-button-primary[data-variant="navattic-tactile"] {
--_lift: var(--ds-shadow-lift);
border-color: color-mix(in srgb, var(--ds-primary-fill) 70%, var(--ds-ink));
box-shadow: inset 0 var(--ds-border-width) 0 0 color-mix(in srgb, var(--ds-ink-on-primary) 18%, transparent),
var(--_lift, var(--ds-shadow-lift));
}
.ds-button-primary[data-variant="navattic-tactile"]:active {
box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--ds-shadow-lift);
--_lift: 0 0 0 0 transparent;
}
.ds-button-primary[data-variant="synara-solid-pill"] {
--_h: calc(var(--ds-control-h) + var(--ds-space-1));        
--_pad-x: var(--ds-space-5);
--_radius: var(--ds-radius-pill);
font-size: var(--ds-text-lg);
}
.ds-button-primary[data-variant="perplexity-circular-submit"] {
--_pad-x: 0;
--_radius: var(--ds-radius-pill);
--_w: var(--_h);
aspect-ratio: 1;
color: var(--ds-ink-on-accent);
background: var(--ds-accent);
border-color: transparent;
}
.ds-button-primary[data-variant="perplexity-circular-submit"]:hover { background: var(--ds-accent-hover); }
.ds-button-primary[data-variant="perplexity-circular-submit"]:disabled {
color: var(--ds-ink-faint);
background: var(--ds-surface-2);
border-color: transparent;
}
.ds-button-primary[data-variant="grid-snapped-fixed-width"] {
--_h: var(--ds-control-h-sm);
--_w: calc(var(--ds-control-h-sm) * 4.5);                   
--_radius: var(--ds-radius-xs);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-semibold);
}
.ds-button-secondary {
--_h:      var(--ds-size-h);
--_pad-x:  calc(var(--ds-size-pad-x) + var(--ds-space-1));    
--_radius: var(--ds-radius-button);
--_w:      auto;
--_gap:    var(--ds-space-2);
--_icon:   var(--ds-icon-size);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_gap);
width: var(--_w);
max-width: 100%;
min-width: 0;
min-height: var(--_h);
padding-inline: var(--_pad-x);
padding-block: 0;
font-family: inherit;
font-size: var(--ds-size-text);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-lh-list);
letter-spacing: 0;
text-transform: var(--ds-control-case);
text-decoration: none;
white-space: nowrap;
color: var(--ds-ink);
background: var(--ds-surface);
border: var(--ds-border-width) solid var(--ds-border);
border-radius: var(--_radius);
box-shadow: var(--ds-shadow-lip);               
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
border-color var(--ds-dur-fast) var(--ds-ease-standard),
box-shadow var(--ds-dur-fast) var(--ds-ease-standard),
color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-button-secondary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-button-secondary__icon {
flex: none;
display: inline-flex;
width: var(--_icon);
height: var(--_icon);
}
.ds-button-secondary__icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round; stroke-linejoin: round;
}
.ds-button-secondary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); }
.ds-button-secondary__icon[data-slot="leading"]  { margin-inline-start: calc(-1 * var(--ds-space-0-5)); }
.ds-button-secondary__dot {
flex: none;
width: var(--ds-space-2);
height: var(--ds-space-2);
border-radius: var(--ds-radius-pill);
background: var(--ds-live);
}
.ds-button-secondary:hover,
.ds-button-secondary[data-state="hover"] {
border-color: var(--ds-border-strong);
background: var(--ds-hover-bg);                
}
[data-hover="lift"] .ds-button-secondary:hover,
[data-hover="lift"] .ds-button-secondary[data-state="hover"] { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); }
.ds-button-secondary:active,
.ds-button-secondary[data-state="pressed"] {
background: var(--ds-surface-pressed, var(--ds-surface-3));   
border-color: var(--ds-border-strong);
box-shadow: var(--ds-shadow-lip);
}
.ds-button-secondary:focus-visible,
.ds-button-secondary[data-state="focus"] {
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: var(--ds-ring-offset);
}
.ds-button-secondary[aria-pressed="true"],
.ds-button-secondary[aria-expanded="true"] {
background: var(--ds-selected-bg);
color: var(--ds-selected-ink);
border-color: var(--ds-border-strong);
}
.ds-button-secondary:disabled,
.ds-button-secondary[aria-disabled="true"] {
color: var(--ds-ink-faint);
background: var(--ds-surface-3);
border-color: var(--ds-rule);
box-shadow: none;
cursor: not-allowed;
}
.ds-button-secondary[aria-busy="true"] { pointer-events: none; }
.ds-button-secondary[aria-busy="true"] > * { visibility: hidden; }
.ds-button-secondary[aria-busy="true"]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: var(--_icon);
height: var(--_icon);
border: 2px solid transparent;
border-block-start-color: currentColor;
border-inline-end-color: currentColor;
border-radius: var(--ds-radius-pill);
animation: ds-button-secondary-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-button-secondary-spin { to { transform: rotate(360deg); } }
.ds-button-secondary[data-tone="danger"],
.ds-button-secondary[data-variant="danger-text"] { color: var(--ds-danger-ink); }
.ds-button-secondary[data-tone="danger"]:hover,
.ds-button-secondary[data-variant="danger-text"]:hover,
.ds-button-secondary[data-tone="danger"][data-state="hover"],
.ds-button-secondary[data-variant="danger-text"][data-state="hover"] {
background: var(--ds-danger-tint);
border-color: var(--ds-danger);
color: var(--ds-danger-ink);
}
.ds-button-secondary[data-tone="danger"]:focus-visible,
.ds-button-secondary[data-variant="danger-text"]:focus-visible { outline-color: var(--ds-danger); }
.ds-button-secondary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); }
.ds-button-secondary[data-size="lg"] { --_icon: var(--ds-icon-size-row); }
.ds-button-secondary[data-variant="outlined-lip"] {
--_h: var(--ds-control-h-sm);
--_pad-x: var(--ds-space-3);
box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift);
}
.ds-button-secondary[data-variant="outlined-lip"]:hover { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); }
.ds-button-secondary[data-variant="outlined-mono-caps-pill"] {
--_h: var(--ds-control-h-lg);                                
--_pad-x: var(--ds-space-6);
--_radius: var(--ds-radius-pill);
font-family: var(--ds-font-mono);
font-size: var(--ds-text-sm);
letter-spacing: .12em;
text-transform: uppercase;
border-color: var(--ds-border-strong);
background: transparent;
}
.ds-button-secondary[data-variant="outlined-mono-caps-pill"]:hover { background: var(--ds-hover-bg); border-color: var(--ds-ink-muted); }
.ds-button-secondary[data-variant="tint-fill"] {
background: var(--ds-surface-2);
border-color: transparent;
box-shadow: none;
}
.ds-button-secondary[data-variant="tint-fill"]:hover,
.ds-button-secondary[data-variant="tint-fill"][data-state="hover"] { background: var(--ds-surface-3); border-color: transparent; box-shadow: none; }
.ds-button-secondary[data-variant="tint-fill"]:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); }
.ds-button-secondary[data-variant="tint-fill"]:disabled { background: var(--ds-surface-3); border-color: transparent; }
.ds-button-secondary[data-variant="ghost-text"] {
--_pad-x: var(--ds-space-2);
color: var(--ds-ink-2);
background: transparent;
border-color: transparent;
box-shadow: none;
}
.ds-button-secondary[data-variant="ghost-text"]:hover,
.ds-button-secondary[data-variant="ghost-text"][data-state="hover"] { background: var(--ds-hover-bg); border-color: transparent; color: var(--ds-ink); box-shadow: none; }
.ds-button-secondary[data-variant="ghost-text"]:disabled { background: transparent; border-color: transparent; }
.ds-button-secondary[data-variant="glass"] {
--_h: calc(var(--ds-control-h) + var(--ds-space-1));        
--_pad-x: var(--ds-space-5);
--_radius: var(--ds-radius-pill);
font-size: var(--ds-text-lg);
color: var(--ds-ink);
background: var(--ds-glass-fill);
border-color: var(--ds-glass-border);
box-shadow: none;
-webkit-backdrop-filter: blur(var(--ds-glass-blur));
backdrop-filter: blur(var(--ds-glass-blur));
}
.ds-button-secondary[data-variant="glass"]:hover { background: var(--ds-glass-fill); border-color: var(--ds-ink); box-shadow: none; }
.ds-button-secondary[data-variant="hsaj-full-width-ghost"] {
--_w: 100%;
--_h: calc(var(--ds-control-h) + var(--ds-space-3));        
--_pad-x: var(--ds-space-4);
--_radius: var(--ds-radius-md);
--_icon: var(--ds-icon-size-row);
justify-content: flex-start;
font-size: var(--ds-text-lg);
font-weight: var(--ds-weight-regular);
box-shadow: none;
}
.ds-button-secondary[data-variant="ink-outline"] {
--_h: calc(var(--ds-control-h-sm) + var(--ds-space-0-5));   
--_radius: var(--ds-radius-md);
font-weight: var(--ds-weight-semibold);
border-color: var(--ds-ink);
box-shadow: none;
}
.ds-button-secondary[data-variant="ink-outline"]:hover { border-color: var(--ds-ink); background: var(--ds-hover-bg); box-shadow: none; }
.ds-button-secondary[data-variant="dark-ghost"] {
background: var(--ds-surface-2);
border-color: var(--ds-border);
box-shadow: none;
}
.ds-button-secondary[data-variant="dark-ghost"]:hover { background: var(--ds-surface-3); border-color: var(--ds-border-strong); box-shadow: none; }
.ds-marketing-nav {
--_h: var(--ds-topbar-h);
--_cta-h: var(--ds-size-h);                   
--_gap: var(--ds-space-4);                    
--_link-gap: var(--ds-space-1);               
--_max: var(--ds-container-max);              
--_spin: var(--ds-ink);                       
position: relative;
z-index: 1;
container-type: inline-size;
background: transparent;
color: var(--ds-ink);
font-family: var(--ds-font-sans);
font-size: var(--ds-text-md);
line-height: var(--ds-lh-list);
}
.ds-marketing-nav[data-sticky] {
position: sticky;
inset-block-start: 0;
z-index: var(--ds-z-sticky);
}
.ds-marketing-nav[data-state="scrolled"] {
background: color-mix(in srgb, var(--ds-ground) 88%, transparent);
-webkit-backdrop-filter: blur(var(--ds-glass-blur));
backdrop-filter: blur(var(--ds-glass-blur));
border-block-end: var(--ds-border-width) solid var(--ds-rule);
transition: background-color var(--ds-dur-base) var(--ds-ease-standard),
border-color var(--ds-dur-base) var(--ds-ease-standard);
}
.ds-marketing-nav__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2) var(--_gap);
min-height: var(--_h);
width: 100%;
max-width: var(--_max);
margin-inline: auto;
padding-inline: var(--ds-gutter-page);
min-width: 0;
}
.ds-marketing-nav__brand {
order: 0;
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
min-height: var(--ds-control-h-sm);
border-radius: var(--ds-radius-sm);
color: var(--ds-ink);
text-decoration: none;
font-weight: var(--ds-weight-semibold);
font-size: var(--ds-text-lg);
letter-spacing: var(--ds-heading-tracking);
}
.ds-marketing-nav__mark {
width: var(--ds-icon-size-rail);
height: var(--ds-icon-size-rail);
flex: none;
fill: currentColor;
}
.ds-marketing-nav__wordmark { white-space: nowrap; }
.ds-marketing-nav__inner:not(:has(.ds-marketing-nav__links)) .ds-marketing-nav__brand { margin-inline-end: auto; }
.ds-marketing-nav__divider {
order: 0;
width: var(--ds-border-width);
align-self: stretch;
margin-block: var(--ds-space-4);
margin-inline: calc(-1 * var(--ds-space-2));
background: var(--ds-rule-strong);
flex: none;
}
.ds-marketing-nav__drawer { display: contents; }
.ds-marketing-nav__links {
order: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--_link-gap);
margin: 0;
margin-inline-end: auto;                 
padding: 0;
list-style: none;
min-width: 0;
}
.ds-marketing-nav[data-align="center"] .ds-marketing-nav__links { margin-inline: auto; }
.ds-marketing-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
min-height: var(--ds-control-h-sm);
padding-inline: var(--ds-control-pad-x);   
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--ds-ink-2);
font-weight: var(--ds-weight-medium);
font-size: inherit;
text-decoration: none;
text-transform: var(--ds-control-case);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-marketing-nav__link:hover,
.ds-marketing-nav__link[data-state="hover"] {
color: var(--ds-ink);
background: var(--ds-hover-bg);
text-decoration: none;
}
.ds-marketing-nav__link[aria-current="page"] {
color: var(--ds-ink);
font-weight: var(--ds-selected-weight);
}
[data-selection="underline"] .ds-marketing-nav__link[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: var(--ds-selected-line);
text-underline-offset: .55em;
}
[data-selection="bar"] .ds-marketing-nav__link[aria-current="page"]::after {
content: "";
position: absolute;
inset-inline: var(--ds-space-3);
inset-block-end: 0;
height: 2px;
background: var(--ds-selected-line);
}
.ds-marketing-nav__link[aria-expanded="true"] {
color: var(--ds-ink);
background: var(--ds-surface-selected);
}
.ds-marketing-nav__link[aria-disabled="true"] {
color: var(--ds-ink-faint);
pointer-events: none;
}
.ds-marketing-nav__chevron {
width: 12px;
height: 12px;
color: var(--ds-ink-muted);
fill: none;
stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
transition: transform var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-marketing-nav__link[aria-expanded="true"] .ds-marketing-nav__chevron { transform: rotate(180deg); }
.ds-marketing-nav__link-icon {
width: var(--ds-icon-size);
height: var(--ds-icon-size);
fill: none;
stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
}
.ds-marketing-nav__utilities {
order: 2;
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
}
.ds-marketing-nav__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ds-control-h-sm);
height: var(--ds-control-h-sm);
padding: 0;
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--ds-ink-2);
text-decoration: none;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-marketing-nav__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-marketing-nav__icon-btn[aria-pressed="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); }
.ds-marketing-nav__icon-btn[aria-disabled="true"], .ds-marketing-nav__icon-btn:disabled { color: var(--ds-ink-faint); }
.ds-marketing-nav__icon {
width: var(--ds-icon-size);
height: var(--ds-icon-size);
fill: none;
stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
}
.ds-marketing-nav__icon--fill { fill: currentColor; stroke: none; }
.ds-marketing-nav__meta {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
min-height: var(--ds-control-h-sm);
padding-inline: var(--ds-space-2);
border-radius: var(--ds-radius-sm);
color: var(--ds-ink-2);
font-weight: var(--ds-weight-medium);
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.ds-marketing-nav__meta:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-marketing-nav__status {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-height: var(--ds-control-h-sm);
padding-inline: var(--ds-space-2);
border-radius: var(--ds-radius-sm);
font-family: var(--ds-font-mono);
font-size: var(--ds-text-xs);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-ink-muted);
text-decoration: none;
white-space: nowrap;
}
.ds-marketing-nav__status:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-marketing-nav__status::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--ds-radius-pill);
background: var(--ds-presence);
flex: none;
}
.ds-marketing-nav__status[data-status="degraded"]::before { background: var(--ds-warning); }
.ds-marketing-nav__status[data-status="down"]::before { background: var(--ds-danger); }
.ds-marketing-nav__status[data-status="version"] { text-transform: none; }
.ds-marketing-nav__status[data-status="version"]::before { display: none; }
@container (max-width: 600px) {
.ds-marketing-nav__status:not([data-status="version"]) { padding-inline: var(--ds-space-1); }
.ds-marketing-nav__status:not([data-status="version"]) .ds-marketing-nav__status-text {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}
.ds-marketing-nav__clock {
color: var(--ds-ink-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-marketing-nav__avatar {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--ds-radius-pill);
background: var(--ds-surface-2);
border: var(--ds-border-width) solid var(--ds-rule);
color: var(--ds-ink-2);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
overflow: hidden;
flex: none;
}
.ds-marketing-nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-marketing-nav__account {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-height: var(--ds-control-h-lg);
padding-inline: var(--ds-space-3) var(--ds-space-1);
border: var(--ds-border-width) solid var(--ds-border);
border-radius: var(--ds-radius-pill);
background: var(--ds-surface);
color: var(--ds-ink);
transition: box-shadow var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-marketing-nav__account:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-lift); }
.ds-marketing-nav__account .ds-marketing-nav__avatar { width: 32px; height: 32px; }
.ds-marketing-nav__actions {
order: 3;
display: flex;
align-items: center;
gap: var(--ds-space-3);
flex: none;
}
.ds-marketing-nav__cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
min-height: var(--_cta-h);
padding-inline: var(--ds-size-pad-x);
border: var(--ds-border-width) solid transparent;
border-radius: var(--ds-radius-button);
background: transparent;
color: var(--ds-ink);
font-size: var(--ds-size-text);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-lh-list);
text-decoration: none;
text-transform: var(--ds-control-case);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
border-color var(--ds-dur-fast) var(--ds-ease-standard),
box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-marketing-nav__cta .ds-marketing-nav__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); }
.ds-marketing-nav__cta[data-cta="primary"] {
--_spin: var(--ds-ink-on-primary);
background: var(--ds-primary-fill);
border-color: var(--ds-primary-border);
color: var(--ds-ink-on-primary);
box-shadow: var(--ds-shadow-lip);
}
.ds-marketing-nav__cta[data-cta="primary"]:hover { background: var(--ds-primary-fill-hover); }
.ds-marketing-nav__cta[data-cta="secondary"],
.ds-marketing-nav__cta[data-cta="outline-arrow"] {
background: var(--ds-surface);
border-color: var(--ds-border);
color: var(--ds-ink);
box-shadow: var(--ds-shadow-lip);
}
.ds-marketing-nav__cta[data-cta="secondary"]:hover,
.ds-marketing-nav__cta[data-cta="outline-arrow"]:hover {
border-color: var(--ds-border-strong);
background: var(--ds-hover-bg);
}
.ds-marketing-nav__cta[data-cta="outline"] {
background: transparent;
border-color: var(--ds-border);
color: var(--ds-ink);
}
.ds-marketing-nav__cta[data-cta="outline"]:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); }
.ds-marketing-nav__cta[data-cta="light"] { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-marketing-nav__cta[data-cta="light"]:hover { background: var(--ds-surface-3); }
.ds-marketing-nav__cta[data-cta="ghost"] { color: var(--ds-ink-2); }
.ds-marketing-nav__cta[data-cta="ghost"]:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-marketing-nav__cta[data-cta="text"] {
padding-inline: var(--ds-space-1);
color: var(--ds-ink-2);
border-radius: var(--ds-radius-xs);
}
.ds-marketing-nav__cta[data-cta="text"]:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; }
.ds-marketing-nav__cta[aria-disabled="true"],
.ds-marketing-nav__cta:disabled {
background: var(--ds-surface-3);
border-color: var(--ds-rule);
color: var(--ds-ink-faint);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.ds-marketing-nav__cta[aria-busy="true"] { color: transparent; pointer-events: none; }
.ds-marketing-nav__cta[aria-busy="true"]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: var(--ds-icon-size);
height: var(--ds-icon-size);
border: 2px solid var(--_spin);
border-inline-end-color: transparent;
border-radius: var(--ds-radius-pill);
animation: ds-marketing-nav-spin calc(var(--ds-dur-slow) * 3) linear infinite;
}
@keyframes ds-marketing-nav-spin { to { transform: rotate(360deg); } }
.ds-marketing-nav__menu-toggle {
order: 4;
display: none;
align-items: center;
justify-content: center;
width: var(--ds-control-h);
height: var(--ds-control-h);
padding: 0;
border: var(--ds-border-width) solid var(--ds-border);
border-radius: var(--ds-radius-button);
background: var(--ds-surface);
color: var(--ds-ink);
flex: none;
}
.ds-marketing-nav__menu-toggle:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); }
.ds-marketing-nav__menu-toggle .ds-marketing-nav__icon--close { display: none; }
.ds-marketing-nav__menu-toggle[aria-expanded="true"] .ds-marketing-nav__icon--menu { display: none; }
.ds-marketing-nav__menu-toggle[aria-expanded="true"] .ds-marketing-nav__icon--close { display: block; }
.ds-marketing-nav:not([data-variant]),
.ds-marketing-nav[data-variant="jstov"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-2));
border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav:not([data-variant]) .ds-marketing-nav__links,
.ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__links { margin-inline: auto; }
.ds-marketing-nav:not([data-variant]) .ds-marketing-nav__brand,
.ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__brand {
align-self: stretch;
padding-inline-end: var(--_gap);
border-inline-end: var(--ds-border-width) solid var(--ds-rule);
border-radius: 0;
}
.ds-marketing-nav:not([data-variant]) .ds-marketing-nav__utilities,
.ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__utilities {
align-self: stretch;
padding-inline-start: var(--_gap);
border-inline-start: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-variant="vercel-button-trio"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-6));
--_cta-h: var(--ds-control-h-lg);
--_link-gap: var(--ds-space-2);
}
.ds-marketing-nav[data-variant="vercel-button-trio"] .ds-marketing-nav__cta {
border-radius: var(--ds-radius-md);
padding-inline: var(--ds-space-4);
}
.ds-marketing-nav[data-variant="vercel-button-trio"] .ds-marketing-nav__link { font-size: var(--ds-text-lg); }
.ds-marketing-nav[data-variant="intercom-dual-cta"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-2));
}
.ds-marketing-nav[data-variant="intercom-dual-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-xs); }
.ds-marketing-nav[data-variant="intercom-dual-cta"] .ds-marketing-nav__cta[data-cta="outline-arrow"] {
background: transparent;
border-color: var(--ds-ink);
}
.ds-marketing-nav[data-variant="attio-dual-cta"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-2));
background: var(--ds-surface);
border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-variant="attio-dual-cta"] .ds-marketing-nav__link { font-size: var(--ds-text-sm); }
.ds-marketing-nav[data-variant="attio-dual-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-md); font-size: var(--ds-text-sm); }
.ds-marketing-nav[data-variant="fibery-cta-trio"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-2));
--_link-gap: var(--ds-space-2);
}
.ds-marketing-nav[data-variant="heron-table-nav"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-1));
--_gap: 0px;
--_max: none;
border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__inner {
padding-inline: 0;
flex-wrap: nowrap;
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__brand {
flex: 1 1 50%;
align-self: stretch;
padding-inline: var(--ds-gutter-page);
border-radius: 0;
min-width: 0;
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__links {
flex: 1 1 50%;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0;
align-self: stretch;
margin: 0;
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link {
display: flex;
align-items: flex-start;
height: 100%;
min-height: var(--_h);
padding: var(--ds-space-3) var(--ds-space-4);
border-radius: 0;
border-inline-start: var(--ds-border-width) solid var(--ds-rule);
font-family: var(--ds-font-label);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
letter-spacing: var(--ds-label-tracking);
text-transform: var(--ds-label-case);
color: var(--ds-ink);
white-space: normal;
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[aria-haspopup]::after {
content: "";
position: absolute;
inset-inline-end: var(--ds-space-2);
inset-block-end: var(--ds-space-2);
width: 6px;
height: 6px;
border-inline-end: var(--ds-border-width) solid var(--ds-rule-strong);
border-block-end: var(--ds-border-width) solid var(--ds-rule-strong);
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] {
color: var(--ds-ink-link);
grid-column: span 1;
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] .ds-marketing-nav__icon {
position: absolute;
inset-inline-end: var(--ds-space-3);
inset-block-end: var(--ds-space-2);
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link:hover { background: var(--ds-hover-bg); }
.ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] {
--_h: calc(var(--ds-topbar-h) - var(--ds-space-1));
--_link-gap: var(--ds-space-2);
}
.ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__links { margin-inline: auto; }
.ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__link { color: var(--ds-ink); }
.ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-pill); }
.ds-marketing-nav[data-variant="luma-transparent-app-nav"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-2));
--_max: none;
--_link-gap: var(--ds-space-1);
}
.ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__inner { padding-inline: var(--ds-space-6); }
.ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__link { color: var(--ds-ink-muted); }
.ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__link[aria-current="page"] { color: var(--ds-ink); }
.ds-marketing-nav[data-variant="airbnb-account-pill"] {
--_h: calc(var(--ds-topbar-h) + var(--ds-space-6));
background: var(--ds-surface);
border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__cta[data-cta="text"] {
font-weight: var(--ds-weight-semibold);
color: var(--ds-ink);
padding-inline: var(--ds-space-3);
min-height: var(--ds-control-h);
border-radius: var(--ds-radius-pill);
}
.ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__cta[data-cta="text"]:hover { background: var(--ds-hover-bg); text-decoration: none; }
.ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__icon-btn { border-radius: var(--ds-radius-pill); width: var(--ds-control-h); height: var(--ds-control-h); }
@container (max-width: 1024px) {
.ds-marketing-nav__inner { gap: var(--ds-space-2) var(--ds-space-3); }
.ds-marketing-nav__drawer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--ds-space-3);
flex-basis: 100%;
order: 5;
padding-block: var(--ds-space-3) var(--ds-space-4);
border-block-start: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav__links {
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0 !important;      
}
.ds-marketing-nav__link {
width: 100%;
min-height: var(--ds-row-h);
justify-content: space-between;
white-space: normal;
}
.ds-marketing-nav__actions { flex-direction: column; align-items: stretch; gap: var(--ds-space-2); }
.ds-marketing-nav__cta { width: 100%; }
.ds-marketing-nav__brand { margin-inline-end: auto; }   
.ds-marketing-nav__utilities { margin-inline-start: 0; }
.ds-marketing-nav__divider { display: none; }
.ds-marketing-nav__menu-toggle { display: inline-flex; }
.ds-marketing-nav__brand,
.ds-marketing-nav__utilities { border: 0 !important; padding-inline: 0 !important; }
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__inner { flex-wrap: wrap; padding-inline: var(--ds-gutter-page); }
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__brand { flex: 1 1 auto; padding-inline: 0; }
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__links { display: flex; }
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link {
height: auto;
min-height: var(--ds-row-h);
align-items: center;
border-inline-start: 0;
border-block-end: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] .ds-marketing-nav__icon { position: static; }
.ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__inner { padding-inline: var(--ds-gutter-page); }
}
@container (max-width: 1024px) {
.ds-marketing-nav[data-js] .ds-marketing-nav__drawer { display: none; }
.ds-marketing-nav[data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__drawer,
.ds-marketing-nav[data-js][data-state="open"] .ds-marketing-nav__drawer { display: flex; }
}
.ds-marketing-nav:not([data-js]) .ds-marketing-nav__menu-toggle { display: none; }
@container (max-width: 1024px) {
.ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__drawer,
.ds-marketing-nav[data-collapse="cta"][data-js] .ds-marketing-nav__drawer,
.ds-marketing-nav[data-collapse="cta"][data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__drawer,
.ds-marketing-nav[data-collapse="cta"][data-js][data-state="open"] .ds-marketing-nav__drawer { display: contents; }
.ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__links {
flex-basis: 100%;
order: 5;
padding-block: var(--ds-space-3) var(--ds-space-4);
border-block-start: var(--ds-border-width) solid var(--ds-rule);
}
.ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__actions { flex-direction: row; align-items: center; order: 3; flex: none; gap: var(--ds-space-2); }
.ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__cta { width: auto; }
.ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__actions:has(.ds-marketing-nav__cta[data-cta="primary"]) .ds-marketing-nav__cta:not([data-cta="primary"]) { display: none; }
.ds-marketing-nav[data-collapse="cta"][data-js] .ds-marketing-nav__links { display: none; }
.ds-marketing-nav[data-collapse="cta"][data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__links,
.ds-marketing-nav[data-collapse="cta"][data-js][data-state="open"] .ds-marketing-nav__links { display: flex; }
}
.ds-answer-evidence svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-answer-evidence {
--_fill:   var(--ds-surface);
--_pad:    calc(var(--ds-space-unit) * 2.5);
--_radius: var(--ds-radius-lg);
--_gap:    calc(var(--ds-space-unit) * 1.75);
--_bubble: var(--ds-surface-2);
display: flex; flex-direction: column; gap: var(--_gap);
background: var(--_fill); border-radius: var(--_radius); padding: var(--_pad);
box-shadow: var(--ds-shadow-card);
color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm);
line-height: var(--ds-lh-body);
max-width: 100%;
}
.ds-answer-evidence[data-size="lg"] {
--_pad: calc(var(--ds-space-unit) * 3.5);
--_gap: calc(var(--ds-space-unit) * 2.25);
font-size: var(--ds-text-base);
box-shadow: var(--ds-shadow-float);
}
.ds-answer-evidence__example {
align-self: flex-start;
font: var(--ds-weight-medium) var(--ds-text-xs)/1 var(--ds-font-label);
letter-spacing: var(--ds-label-tracking-upper); text-transform: uppercase;
color: var(--ds-ink-muted);
}
.ds-answer-evidence__question {
align-self: flex-end; max-width: 85%; margin: 0;
background: var(--_bubble); color: var(--ds-ink);
border-radius: var(--ds-radius-md); padding: calc(var(--ds-space-unit) * 1) calc(var(--ds-space-unit) * 1.5);
}
.ds-answer-evidence__answer { margin: 0; }
.ds-answer-evidence__answer > * { margin: 0; }
.ds-answer-evidence__answer > * + * { margin-top: var(--ds-space-unit); }
.ds-answer-evidence__sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-unit); }
.ds-answer-evidence__source {
display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--ds-space-unit) * 1.25); row-gap: 2px;
align-items: start;
border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
padding: calc(var(--ds-space-unit) * 1.25) calc(var(--ds-space-unit) * 1.5);
color: var(--ds-ink); text-decoration: none; background: var(--ds-surface);
}
a.ds-answer-evidence__source:hover { background: var(--ds-surface-hover); border-color: var(--ds-border-strong); }
a.ds-answer-evidence__source:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }
.ds-answer-evidence__doc { grid-row: 1 / span 3; width: 18px; height: 18px; margin-top: 2px; color: var(--ds-accent-ink); }
.ds-answer-evidence__title { font-weight: var(--ds-weight-semibold); }
.ds-answer-evidence__excerpt { color: var(--ds-ink-2); font-size: var(--ds-text-sm); }
.ds-answer-evidence__excerpt::before { content: "\201C"; }
.ds-answer-evidence__excerpt::after  { content: "\201D"; }
.ds-answer-evidence__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(var(--ds-space-unit) * 1.25);
color: var(--ds-ink-muted); font-size: var(--ds-text-xs);
}
.ds-answer-evidence__owner { display: inline-flex; align-items: center; gap: 6px; }
.ds-answer-evidence__avatar {
display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--ds-radius-pill);
background: var(--ds-accent-tint); color: var(--ds-accent-ink);
font-size: 10px; font-weight: var(--ds-weight-semibold); letter-spacing: .02em;
}
.ds-answer-evidence__meta time { font-variant-numeric: tabular-nums; }
.ds-answer-evidence__notice {
display: flex; gap: var(--ds-space-unit); align-items: flex-start; margin: 0;
border-radius: var(--ds-radius-md); padding: calc(var(--ds-space-unit) * 1.25) calc(var(--ds-space-unit) * 1.5);
background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-text-sm);
}
.ds-answer-evidence__notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ds-answer-evidence__notice strong { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-answer-evidence[data-state="outdated"] .ds-answer-evidence__notice { background: var(--ds-warning-tint); color: var(--ds-warning-ink); }
.ds-answer-evidence[data-state="outdated"] .ds-answer-evidence__notice strong { color: var(--ds-warning-ink); }
.ds-answer-evidence[data-state="unavailable"] .ds-answer-evidence__notice { background: var(--ds-danger-tint); color: var(--ds-danger-ink); }
.ds-answer-evidence[data-state="unavailable"] .ds-answer-evidence__notice strong { color: var(--ds-danger-ink); }
.ds-answer-evidence__handoff {
display: flex; flex-direction: column; gap: calc(var(--ds-space-unit) * 1.25);
border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
padding: calc(var(--ds-space-unit) * 1.5);
}
.ds-answer-evidence__handoff .ds-answer-evidence__owner { gap: var(--ds-space-unit); }
.ds-answer-evidence__handoff .ds-answer-evidence__avatar { width: 32px; height: 32px; font-size: 12px; }
.ds-answer-evidence__who { display: flex; flex-direction: column; }
.ds-answer-evidence__who b { font-weight: var(--ds-weight-semibold); }
.ds-answer-evidence__who span { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); }
.ds-answer-evidence__share {
margin: 0; display: flex; gap: var(--ds-space-unit); align-items: flex-start;
color: var(--ds-ink-2); font-size: var(--ds-text-sm);
}
.ds-answer-evidence__share svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ds-ink-muted); }
.ds-answer-evidence__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-unit); }
.ds-answer-evidence__button {
font: inherit; font-weight: var(--ds-weight-medium); font-size: var(--ds-text-sm);
border-radius: var(--ds-radius-button); padding: calc(var(--ds-space-unit) * 1) calc(var(--ds-space-unit) * 2);
min-height: 40px; cursor: pointer; border: 1px solid var(--ds-border-strong);
background: var(--ds-surface); color: var(--ds-ink);
}
.ds-answer-evidence__button[data-variant="primary"] {
background: var(--fm-tenant-action, var(--ds-primary-fill)); color: var(--fm-tenant-on-action, var(--ds-ink-on-primary));
border-color: transparent;
}
.ds-answer-evidence__button[data-variant="primary"]:hover { background: var(--fm-tenant-action-hover, var(--ds-primary-fill-hover)); }
.ds-answer-evidence__button:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }
.ds-answer-evidence__reply {
display: flex; flex-direction: column; gap: 6px;
border-left: 3px solid var(--ds-accent); padding-left: calc(var(--ds-space-unit) * 1.5);
}
.ds-answer-evidence__reply-label { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); }
.ds-answer-evidence__reply p { margin: 0; }
.ds-answer-evidence__saved {
display: flex; gap: var(--ds-space-unit); align-items: center; margin: 0;
color: var(--ds-success-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium);
}
.ds-answer-evidence__saved svg { width: 16px; height: 16px; }
.ds-answer-evidence[data-state="loading"] .ds-answer-evidence__answer::after {
content: ""; display: block; height: 12px; width: 70%; border-radius: var(--ds-radius-sm);
background: var(--ds-surface-2);
}
@media (prefers-reduced-motion: no-preference) {
.ds-answer-evidence[data-state="loading"] .ds-answer-evidence__answer::after { animation: ds-answer-evidence-pulse 1.4s ease-in-out infinite; }
}
@keyframes ds-answer-evidence-pulse { 50% { opacity: .5; } }
@media (max-width: 480px) {
.ds-answer-evidence, .ds-answer-evidence[data-size="lg"] { --_pad: calc(var(--ds-space-unit) * 2); }
.ds-answer-evidence__question { max-width: 92%; }
}
.ds-text-link {
--_gap:   var(--ds-space-1);
--_glyph: 1em;                                   
display: inline;                                 
color: var(--ds-ink-link);
font: inherit;
font-weight: inherit;
text-decoration: underline;
text-decoration-thickness: var(--ds-border-width);
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
text-underline-offset: .18em;
border-radius: var(--ds-radius-xs);              
cursor: pointer;
transition: color var(--ds-dur-fast) var(--ds-ease-standard),
text-decoration-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-text-link__glyph {
display: inline-block;
width: var(--_glyph);
height: var(--_glyph);
vertical-align: -.12em;
margin-inline-start: var(--_gap);
transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-text-link__glyph[data-slot="leading"] { margin-inline-start: 0; margin-inline-end: var(--_gap); }
.ds-text-link__glyph svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: var(--ds-icon-stroke);
stroke-linecap: round; stroke-linejoin: round;
}
.ds-text-link__label { }
.ds-text-link:hover,
.ds-text-link[data-state="hover"] { text-decoration-color: currentColor; }
.ds-text-link:hover .ds-text-link__glyph:not([data-slot="leading"]) { transform: translateX(var(--ds-space-0-5)); }
.ds-text-link:focus-visible,
.ds-text-link[data-state="focus"] {
outline: var(--ds-ring-width) solid var(--ds-ring);
outline-offset: var(--ds-ring-offset);
text-decoration-color: currentColor;
}
.ds-text-link:active { color: var(--ds-accent-hover); }
.ds-text-link[aria-current="page"],
.ds-text-link[aria-current="true"] { color: var(--ds-ink); font-weight: var(--ds-weight-medium); text-decoration: none; }
.ds-text-link[aria-disabled="true"] { color: var(--ds-ink-faint); text-decoration-color: currentColor; pointer-events: none; cursor: default; }
.ds-text-link[data-external] .ds-text-link__glyph { vertical-align: -.05em; }
.ds-text-link[data-kind="route"] {
display: inline-flex;
align-items: center;
color: var(--ds-ink);
font-weight: var(--ds-weight-medium);
text-decoration: none;
}
.ds-text-link[data-kind="route"]:hover,
.ds-text-link[data-kind="route"][data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-decoration-color: currentColor; }
.ds-text-link[data-kind="route"]:active { color: var(--ds-ink-2); }
.ds-text-link[data-kind="danger"] { color: var(--ds-danger-ink); }
.ds-text-link[data-kind="danger"]:hover,
.ds-text-link[data-kind="danger"][data-state="hover"] { color: var(--ds-danger); text-decoration-color: currentColor; }
.ds-text-link[data-kind="danger"]:active { color: var(--ds-danger); }
.ds-text-link[data-variant="no-underline-coloured"] { text-decoration: none; }
.ds-text-link[data-variant="no-underline-coloured"]:hover { text-decoration: underline; text-decoration-color: currentColor; }
.ds-text-link[data-variant="underlined-ink"] {
color: var(--ds-ink);
text-decoration-color: currentColor;
text-underline-offset: .2em;
}
.ds-text-link[data-variant="underlined-ink"]:hover { color: var(--ds-ink-2); text-decoration-thickness: 2px; }
.ds-text-link[data-variant="hue-plus-trailing-chevron"] {
--_gap: var(--ds-space-2);
display: inline-flex;
align-items: center;
text-decoration: none;
}
.ds-text-link[data-variant="hue-plus-trailing-chevron"]:hover { color: var(--ds-accent-hover); }
.ds-text-link[data-variant="arrow-suffix-route-link"] {
display: inline-flex;
align-items: center;
color: var(--ds-ink);
text-decoration: none;
}
.ds-text-link[data-variant="arrow-suffix-route-link"]:hover { text-decoration: underline; text-decoration-color: currentColor; }
.ds-text-link[data-variant="muted-underlined-in-system-text"] {
color: var(--ds-ink-muted);
text-decoration-color: currentColor;
}
.ds-text-link[data-variant="muted-underlined-in-system-text"]:hover { color: var(--ds-ink); }
.ds-text-link[data-variant="quiet-ink-cta"] {
color: var(--ds-ink-2);
text-decoration: none;
}
.ds-text-link[data-variant="quiet-ink-cta"]:hover { text-decoration: underline; text-decoration-color: currentColor; }
.ds-text-link[data-variant="mono-caps-underlined"] {
font-family: var(--ds-font-mono);
font-size: var(--ds-text-sm);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ds-ink);
text-decoration-color: currentColor;
text-underline-offset: .25em;
}
.ds-text-link[data-variant="mono-caps-underlined"]:hover { color: var(--ds-ink-2); }
.ds-banner-callout svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-banner-callout {
--_fill:   var(--ds-surface);
--_edge:   var(--ds-rule);
--_ink:    var(--ds-ink);                       
--_glyph:  var(--ds-ink-muted);                 
--_radius: var(--ds-radius-md);
--_pad-y:  var(--ds-space-3);
--_pad-x:  var(--ds-space-4);
--_gap:    var(--ds-space-3);
--_min-h:  0px;
position: relative;
display: flex;
align-items: flex-start;
gap: var(--_gap);
min-inline-size: 0;
max-inline-size: 100%;
min-block-size: var(--_min-h);
padding: var(--_pad-y) var(--_pad-x);
border-radius: var(--_radius);
background: var(--_fill);
border: var(--ds-border-width) solid var(--_edge);
color: var(--ds-ink-2);
font-family: var(--ds-font-sans);
font-size: var(--ds-text-md);
line-height: var(--ds-lh-body);
text-decoration: none;
}
.ds-banner-callout__icon { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); margin-block-start: calc((1lh - var(--ds-icon-size)) / 2); color: var(--_glyph); }
.ds-banner-callout__icon svg { inline-size: 100%; block-size: 100%; }
.ds-banner-callout__icon[data-disc] { inline-size: 28px; block-size: 28px; margin-block-start: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); }
.ds-banner-callout__icon[data-disc] svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); }
.ds-banner-callout__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); }
.ds-banner-callout__title { color: var(--_ink); font-weight: var(--ds-weight-semibold); }
.ds-banner-callout__text { color: inherit; max-inline-size: var(--ds-measure); }
.ds-banner-callout__text a, .ds-banner-callout__action { color: var(--_ink); font-weight: var(--ds-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
.ds-banner-callout__text a:hover, .ds-banner-callout__action:hover { text-decoration-color: currentColor; }
.ds-banner-callout__action { flex: none; align-self: center; }
:is(.ds-banner-callout:not([data-layout]), .ds-banner-callout[data-layout="inline"]) > .ds-banner-callout__body > .ds-banner-callout__action { align-self: flex-start; margin-block-start: var(--ds-space-1); }   
.ds-banner-callout__dismiss { flex: none; align-self: flex-start; margin-block: calc(-1 * var(--ds-space-1)); margin-inline-end: calc(-1 * var(--ds-space-2)); }
.ds-banner-callout__badge { flex: none; align-self: center; }
.ds-banner-callout__chevron { flex: none; align-self: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); }
.ds-banner-callout__art { flex: none; align-self: center; display: grid; place-items: center; inline-size: 56px; block-size: 56px; color: var(--_ink); }
.ds-banner-callout__art svg { inline-size: 100%; block-size: 100%; }
.ds-banner-callout[data-tone="info"]    { --_fill: var(--ds-info-tint);    --_edge: color-mix(in srgb, var(--ds-info) 35%, transparent);    --_ink: var(--ds-info-ink);    --_glyph: var(--ds-info); }
.ds-banner-callout[data-tone="success"] { --_fill: var(--ds-success-tint); --_edge: color-mix(in srgb, var(--ds-success) 35%, transparent); --_ink: var(--ds-success-ink); --_glyph: var(--ds-success); }
.ds-banner-callout[data-tone="warning"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 40%, transparent); --_ink: var(--ds-warning-ink); --_glyph: var(--ds-warning); }
.ds-banner-callout[data-tone="danger"]  { --_fill: var(--ds-danger-tint);  --_edge: color-mix(in srgb, var(--ds-danger) 35%, transparent);  --_ink: var(--ds-danger-ink);  --_glyph: var(--ds-danger); }
.ds-banner-callout[data-tone="accent"]  { --_fill: var(--ds-accent-tint);  --_edge: var(--ds-accent-soft);                                     --_ink: var(--ds-accent-ink);  --_glyph: var(--ds-accent); }
.ds-banner-callout[data-tone="ai"]      { --_fill: var(--ds-accent-2-tint); --_edge: transparent; --_ink: var(--ds-accent-2-ink); --_glyph: var(--ds-accent-2-ink); }
.ds-banner-callout[data-tone="ai"] .ds-banner-callout__icon[data-disc] { background: color-mix(in srgb, var(--ds-accent-2-tint) 60%, var(--ds-surface)); }
.ds-banner-callout[data-tone] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-tone] .ds-banner-callout__title { color: var(--_ink); }
.ds-banner-callout[data-layout="bar"] {
--_radius: 0px;
--_pad-y: var(--ds-space-1);
--_min-h: calc(var(--ds-control-h-sm) + 2px);   
align-items: center;
inline-size: 100%;
border-width: 0 0 var(--ds-border-width);
}
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__icon { margin-block-start: 0; }
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); }
.ds-banner-callout[data-layout="bar"] .ds-banner-callout__dismiss { align-self: center; margin-block: 0; }
.ds-banner-callout[data-layout="bar"][data-tone] { border-block-end-color: var(--_edge); }
.ds-banner-callout[data-layout="pill"] {
--_radius: var(--ds-radius-pill);
--_pad-y: 0px;
--_pad-x: var(--ds-space-4);
--_gap: var(--ds-space-2);
--_min-h: var(--ds-control-h);
display: inline-flex;
align-items: center;
inline-size: auto;
max-inline-size: 100%;
cursor: pointer;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__body { flex-direction: row; align-items: center; gap: var(--ds-space-2); }
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__text { color: var(--ds-ink); font-size: var(--ds-text-md); }
.ds-banner-callout[data-layout="pill"] .ds-banner-callout__icon { margin-block-start: 0; }
.ds-banner-callout[data-layout="pill"]:has(> .ds-banner-callout__badge) { padding-inline-start: var(--ds-space-2); }
.ds-banner-callout[data-layout="pill"]:hover, .ds-banner-callout[data-layout="pill"][data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); }
.ds-banner-callout[data-layout="pill"]:hover .ds-banner-callout__chevron { transform: translateX(var(--ds-space-0-5)); }
.ds-banner-callout[data-layout="pill"][data-tone] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-layout="pill"][data-tone]:hover { background: var(--_fill); border-color: var(--_ink); }
.ds-banner-callout[data-layout="pill"][data-w="full"] { display: flex; inline-size: 100%; }
.ds-banner-callout[data-layout="floating"] {
--_radius: var(--ds-radius-sm);
--_pad-y: var(--ds-space-1);
--_pad-x: var(--ds-space-3);
--_min-h: var(--ds-control-h-sm);
position: absolute;
inset-block-start: var(--ds-space-3);
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: var(--ds-z-sticky);
display: inline-flex;
align-items: center;
inline-size: max-content;
max-inline-size: calc(100% - 2 * var(--ds-space-4));
}
.ds-banner-callout[data-layout="floating"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); }
.ds-banner-callout[data-layout="floating"] .ds-banner-callout__text { font-size: var(--ds-text-md); }
.ds-banner-callout[data-layout="floating"][data-hanging] { inset-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-block-start-width: 0; }
.ds-banner-callout:is(a, button):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); }
.ds-banner-callout[data-state="dismissed"] { display: none; }
.ds-banner-callout[aria-busy="true"] { --_fill: var(--ds-skeleton); --_edge: transparent; color: transparent; }
.ds-banner-callout[aria-busy="true"] > * { visibility: hidden; }
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] {
--_fill: var(--ds-accent-tint);
--_edge: var(--ds-accent-soft);
--_ink: var(--ds-accent-ink);
--_radius: var(--ds-radius-xs);
--_min-h: 80px;
--_pad-y: var(--ds-space-2);
align-items: center;
justify-content: center;
}
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__body { flex: 0 1 auto; }
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__title { font-size: var(--ds-text-lg); }
.ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__text { color: var(--ds-ink-2); }
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] {
--_edge: transparent;
--_radius: var(--ds-radius-md);
--_ink: var(--ds-accent-2-ink);
--_glyph: var(--ds-accent-2-ink);
background: linear-gradient(135deg, var(--ds-surface) 30%, var(--ds-accent-2-tint) 100%);
}
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__text { color: var(--ds-ink); }
.ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__action { align-self: flex-start; color: var(--ds-ink-link); text-decoration: none; }
.ds-banner-callout[data-variant="manychat-push-down-system-notice"] { --_fill: var(--ds-surface); --_edge: var(--ds-rule-strong); }
.ds-banner-callout[data-variant="manychat-push-down-system-notice"] .ds-banner-callout__text a { color: var(--ds-ink-link); font-weight: var(--ds-weight-regular); text-decoration: none; }
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 35%, transparent); --_ink: var(--ds-warning-ink); }
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__text { color: var(--_ink); }
.ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__action { color: var(--ds-ink-link); }
.ds-banner-callout[data-variant="elevenlabs-announce-pill"] { --_edge: var(--ds-border); }
.ds-banner-callout[data-variant="attio-announcement-capsule"] { --_min-h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); --_gap: var(--ds-space-1); }
.ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__text { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__chevron { inline-size: 12px; block-size: 12px; }
.ds-banner-callout[data-variant="fibery-note-pill"] { --_fill: var(--ds-data-6-tint); --_edge: transparent; --_ink: var(--ds-data-6-ink); --_glyph: var(--ds-data-6-ink); --_min-h: 31px; }
.ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__text { color: var(--_ink); font-weight: var(--ds-weight-medium); }
.ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__chevron { color: var(--_ink); }
.ds-banner-callout[data-variant="fibery-note-pill"][data-layout="inline"] { --_radius: var(--ds-radius-lg); }
.ds-banner-callout[data-variant="navattic-plan-status-pill"] {
--_min-h: var(--ds-control-h-sm);
--_edge: var(--ds-border);
--_glyph: var(--ds-accent);
--_pad-x: var(--ds-space-3);
box-shadow: var(--ds-shadow-lip);
}
.ds-banner-callout[data-variant="navattic-plan-status-pill"] .ds-banner-callout__text { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); color: var(--ds-ink); }
.ds-banner-callout[data-variant="manychat-coach-mark-pill"] { --_fill: var(--ds-surface-2); --_edge: transparent; --_glyph: var(--ds-ink-muted); --_min-h: 31px; --_radius: var(--ds-radius-sm); }
.ds-banner-callout[data-variant="manychat-coach-mark-pill"] .ds-banner-callout__text { color: var(--ds-ink-muted); font-size: var(--ds-text-md); }
.ds-accordion svg[fill="none"] { fill: none; }
.ds-accordion {
--_h:              var(--ds-control-h-lg);     
--_pad-x:          var(--ds-space-3);
--_gap:            var(--ds-space-3);
--_rule:           var(--ds-rule);
--_header-bg:      transparent;
--_header-bg-open: transparent;
--_ink:            var(--ds-ink);
--_marker-w:       var(--ds-icon-size);
--_body-pad:       var(--ds-space-4);
display: flex;
flex-direction: column;
min-width: 0;
color: var(--_ink);
font-size: var(--ds-text-md);
line-height: var(--ds-lh-body);
}
.ds-accordion__item { min-width: 0; border-block-end: var(--ds-border-width) solid var(--_rule); }
.ds-accordion__item:last-child { border-block-end: 0; }
.ds-accordion[data-rules="around"] .ds-accordion__item:first-child { border-block-start: var(--ds-border-width) solid var(--_rule); }
.ds-accordion[data-rules="around"] .ds-accordion__item:last-child { border-block-end: var(--ds-border-width) solid var(--_rule); }
.ds-accordion__header {
display: flex;
align-items: center;
gap: var(--_gap);
min-height: var(--_h);
padding-inline: var(--_pad-x);
padding-block: var(--ds-space-2);
list-style: none;                                 
cursor: pointer;
background: var(--_header-bg);
border-radius: var(--ds-radius-sm);
color: var(--_ink);
font-weight: var(--ds-weight-medium);
-webkit-user-select: none; user-select: none;
transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-accordion__header::-webkit-details-marker { display: none; }
.ds-accordion__header::marker { content: ""; }
.ds-accordion__header:hover,
.ds-accordion__header[data-state="hover"] { background: var(--ds-hover-bg); }
.ds-accordion__item[open] > .ds-accordion__header { background: var(--_header-bg-open); }
.ds-accordion__item[open] > .ds-accordion__header:hover { background: var(--ds-hover-bg); }
.ds-accordion__header:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); }   
.ds-accordion__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-accordion__meta  { flex: 0 0 auto; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-accordion__meta[data-tone="success"] { color: var(--ds-success-ink); }
.ds-accordion__meta[data-tone="warning"] { color: var(--ds-warning-ink); }
.ds-accordion__meta[data-tone="danger"]  { color: var(--ds-danger-ink); }
.ds-accordion__marker {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: var(--_marker-w); height: var(--_marker-w);
color: var(--ds-ink-muted);
order: 2;                                          
transition: transform var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-accordion__marker svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(90deg); }
.ds-accordion__header:hover .ds-accordion__marker { color: var(--ds-ink); }
.ds-accordion[data-marker="start"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); }
.ds-accordion[data-marker="start"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; }
.ds-accordion__body {
padding: var(--ds-space-1) var(--_pad-x) var(--_body-pad);
color: var(--ds-ink-2);
min-width: 0;
}
.ds-accordion[data-marker="start"] .ds-accordion__body { padding-inline-start: calc(var(--_pad-x) + var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); }
.ds-accordion__body > * + * { margin-block-start: var(--ds-space-3); }
.ds-accordion__body p { max-width: var(--ds-measure); }
@supports (interpolate-size: allow-keywords) {
.ds-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--ds-dur-base) var(--ds-ease-standard), content-visibility var(--ds-dur-base) allow-discrete; }
.ds-accordion__item[open]::details-content { block-size: auto; }
.ds-accordion { interpolate-size: allow-keywords; }
}
.ds-accordion__item[aria-disabled="true"] > .ds-accordion__header { color: var(--ds-ink-faint); cursor: not-allowed; pointer-events: none; background: var(--ds-surface-3); }
.ds-accordion__item[aria-disabled="true"] > .ds-accordion__header .ds-accordion__marker { color: var(--ds-ink-faint); }
.ds-accordion__item[aria-busy="true"] .ds-accordion__body > *,
.ds-accordion__body[aria-busy="true"] > * { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); }
.ds-accordion__item[aria-busy="true"] .ds-accordion__body > * > *,
.ds-accordion__body[aria-busy="true"] > * > * { visibility: hidden; }
.ds-accordion__body[data-state="empty"] {
border: var(--ds-border-width) dashed var(--ds-rule);
border-radius: var(--ds-radius-sm);
margin: 0 var(--_pad-x) var(--_body-pad);
padding: var(--ds-space-3);
color: var(--ds-ink-muted);
font-size: var(--ds-text-sm);
}
.ds-accordion__body[data-state="error"] { color: var(--ds-danger-ink); }
.ds-accordion__footer {
display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
margin-inline: calc(-1 * var(--_pad-x)); margin-block-start: var(--_body-pad);
padding: var(--ds-space-2) var(--_pad-x);
border-block-start: var(--ds-border-width) solid var(--_rule);
font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted);
letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case);
}
.ds-accordion__footer > span { display: inline-flex; gap: var(--ds-space-1); }
.ds-accordion__icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: var(--ds-control-h-sm); height: var(--ds-control-h-sm);
border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-button); cursor: pointer; padding: 0;
}
.ds-accordion__icon-btn svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-accordion__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-accordion__icon-btn[data-tone="danger"]:hover { color: var(--ds-danger-ink); background: var(--ds-danger-tint); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] {
--_h: var(--ds-control-h); --_rule: transparent; --_pad-x: var(--ds-space-4);
--_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2);
gap: var(--ds-space-2);
}
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="info"]   { --_header-bg: var(--ds-info-tint);   --_header-bg-open: var(--ds-info-tint);   --_ink: var(--ds-info-ink); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="danger"] { --_header-bg: var(--ds-danger-tint); --_header-bg-open: var(--ds-danger-tint); --_ink: var(--ds-danger-ink); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header:hover { filter: brightness(.97); background: var(--_header-bg); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] {
background: var(--ds-surface);
border: var(--ds-border-width) solid var(--ds-rule);
box-shadow: var(--ds-shadow-object);              
}
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] > .ds-accordion__header { border-end-start-radius: 0; border-end-end-radius: 0; }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__body { padding: var(--ds-space-5) var(--_pad-x) 0; color: var(--ds-ink-2); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__footer { --_rule: var(--ds-rule); margin-block-start: var(--ds-space-5); padding-block: var(--ds-space-2); }
.ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__marker { color: var(--_ink); }
.ds-accordion[data-variant="heron-audience-plus-minus"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule-strong); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item { border-block-end-style: dashed; }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header { border-radius: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker { color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; }
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="vertical"] { display: none; }   
.ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-muted); font-size: var(--ds-text-lg); }
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-4); --_header-bg-open: var(--ds-surface-2); --_rule: var(--ds-rule-soft); }
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); }
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); }   
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__marker { transform: rotate(90deg); }                                                   
.ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__body { padding-block: var(--ds-space-4); }
.ds-accordion[data-variant="v0-disclosure-section-header"],
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-2); --_rule: transparent; --_marker-w: var(--ds-icon-size); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header { color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); padding-block: 0; }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header:hover,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header:hover { color: var(--ds-ink); }
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__marker { order: 2; }
.ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__body,
.ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__body { padding: var(--ds-space-1) 0 var(--ds-space-2); }
.ds-accordion__list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.ds-accordion__list a { display: flex; align-items: center; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); text-decoration: none; font-size: var(--ds-text-sm); }
.ds-accordion__list a:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }
.ds-accordion__list a[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); }
.ds-accordion[data-variant="attio-no-chevron"] { --_h: var(--ds-control-h-lg); --_pad-x: 0px; --_rule: var(--ds-rule); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__marker { display: none; }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__item[open] > .ds-accordion__header { color: var(--ds-ink); }
.ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__body { padding: 0 0 var(--ds-space-4); }
.ds-accordion[data-variant="jstov-faq-rows"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-heading-tracking); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker { font-family: var(--ds-font-mono); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: 1; color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker [data-glyph="minus"] { display: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="plus"]  { display: none; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="minus"] { display: inline; }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-2); font-size: var(--ds-text-md); }
.ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body p { max-width: 60ch; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-3)); --_pad-x: var(--ds-space-2); --_rule: transparent; --_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2); gap: var(--ds-space-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header:hover { background: var(--ds-hover-bg); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); color: var(--ds-ink-muted); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker svg { width: var(--ds-space-3); height: var(--ds-space-3); fill: currentColor; stroke: none; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body { padding: 0 var(--ds-space-2) var(--ds-space-2); color: var(--ds-ink-2); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > p { padding-inline-start: calc(var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h-lg); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: var(--ds-surface); --_header-bg-open: var(--ds-surface); font-size: var(--ds-text-md); }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h); gap: 0; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: transparent; border: 0; }
.ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: transparent; --_header-bg-open: transparent; font-size: var(--ds-text-md); color: var(--ds-ink-muted); }
.ds-accordion[data-variant="synara-recap-collapsible"] { --_h: var(--ds-control-h-sm); --_pad-x: 0px; --_rule: var(--ds-rule); font-size: var(--ds-text-sm); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); padding-block: 0; }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__marker { transform: rotate(90deg); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); }
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ds-ink-muted); margin: 0 0 var(--ds-space-2); }   
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] + .ds-accordion__preview { display: none; }   
.ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__body { padding: 0 0 var(--ds-space-2); color: var(--ds-ink-2); }
.ds-illustration-slot {
--_ratio:  268 / 130;                             
--_size:   100%;
--_ground: var(--ds-illustration-ground);         
--_radius: var(--ds-radius-md);
--_hue:    var(--ds-data-1);                      
--_hue-2:  var(--ds-data-5);
--_ink:    var(--ds-line-art);                    
position: relative;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
margin: 0;
inline-size: var(--_size);
max-inline-size: 100%;
min-width: 0;
color: var(--ds-ink);
}
.ds-illustration-slot svg { fill: none; stroke: var(--_ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-illustration-slot__frame {
position: relative;
display: grid;
place-items: center;
aspect-ratio: var(--_ratio);
inline-size: 100%;
overflow: hidden;
border-radius: var(--_radius);
background: var(--_ground);
isolation: isolate;
container-type: inline-size;
}
.ds-illustration-slot__frame > * { min-width: 0; }
.ds-illustration-slot__caption { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-illustration-slot[data-placement="band"] { --_ratio: 268 / 130; }
.ds-illustration-slot[data-placement="band"] .ds-illustration-slot__frame { border-radius: var(--_radius) var(--_radius) 0 0; }
.ds-illustration-slot[data-placement="well"] { --_ratio: 1; --_size: 128px; flex: none; }
.ds-illustration-slot[data-placement="well"] .ds-illustration-slot__frame { border-radius: var(--_radius) 0 0 var(--_radius); }
.ds-illustration-slot[data-placement="corner"] {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
--_size: clamp(200px, 40%, 520px);
--_ratio: 1;
z-index: 0;
pointer-events: none;
transform: translate(-30%, 35%);                
}
.ds-illustration-slot[data-placement="corner"] .ds-illustration-slot__frame { background: transparent; overflow: visible; }
.ds-illustration-slot[data-placement="plate"] { --_ratio: 21 / 9; --_radius: 0; }
.ds-illustration-slot[data-placement="plate"] .ds-illustration-slot__frame {
-webkit-mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%);
mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%);   
}
.ds-illustration-slot[data-art="ambient"] { --_hue: var(--ds-texture-color); --_hue-2: var(--ds-texture-color); --_ink: var(--ds-texture-color); }
.ds-illustration-slot[data-art="ambient"] .ds-illustration-slot__card { background: var(--ds-texture-color); box-shadow: none; }
.ds-illustration-slot__card {
position: relative;
display: flex;
flex-direction: column;
gap: 8cqi;
inline-size: 46%;
padding: 7cqi;
border-radius: var(--ds-radius-sm);
background: var(--ds-surface);
box-shadow: var(--ds-shadow-object);            
rotate: -4deg;
}
.ds-illustration-slot__card > i { display: block; block-size: 5cqi; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); }
.ds-illustration-slot__card > i:first-child { inline-size: 60%; background: color-mix(in srgb, var(--_hue) 35%, var(--ds-surface)); }
.ds-illustration-slot__card > i:nth-child(3) { inline-size: 75%; }
[data-register="flat"] .ds-illustration-slot__card { box-shadow: none; rotate: 0deg; }
.ds-illustration-slot__disc {
position: absolute;
inset-block-end: 18%;
inset-inline-end: 22%;
inline-size: 22cqi;
aspect-ratio: 1;
border-radius: var(--ds-radius-pill);
background: var(--_hue);
box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__disc::after { content: ""; position: absolute; inset: 32%; border-radius: var(--ds-radius-xs); background: var(--ds-ink-on-accent); }
.ds-illustration-slot__slab {
position: absolute;
inset-block-end: 12%;
inset-inline-start: 14%;
inline-size: 34%;
block-size: 18%;
border-radius: var(--ds-radius-xs);
background: repeating-linear-gradient(to right, var(--_hue-2) 0 3cqi, transparent 3cqi 6cqi);
opacity: .8;
}
.ds-illustration-slot__mascot {
position: relative;
inline-size: 56%;
aspect-ratio: 1;
border-radius: var(--ds-radius-pill);
background: var(--_hue);
}
.ds-illustration-slot__mascot::before {
content: "";
position: absolute;
inset: -18% 30% auto -12%;
inline-size: 60%;
aspect-ratio: 1;
border-radius: var(--ds-radius-pill);
background: color-mix(in srgb, var(--_hue) 78%, var(--ds-ink));
z-index: -1;
}
.ds-illustration-slot__mascot::after {
content: "";
position: absolute;
inset: 40% 28% auto 28%;
block-size: 18%;
background:
linear-gradient(var(--ds-ink-on-accent), var(--ds-ink-on-accent)) 15% 0 / 22% 100% no-repeat,
linear-gradient(var(--ds-ink-on-accent), var(--ds-ink-on-accent)) 85% 0 / 22% 100% no-repeat;
}
[data-register="line"] .ds-illustration-slot__mascot { background: transparent; border: 1.5px solid var(--_ink); }
[data-register="line"] .ds-illustration-slot__mascot::before { background: transparent; border: 1.5px solid var(--_ink); }
[data-register="line"] .ds-illustration-slot__mascot::after {
background:
linear-gradient(var(--_ink), var(--_ink)) 15% 0 / 22% 100% no-repeat,
linear-gradient(var(--_ink), var(--_ink)) 85% 0 / 22% 100% no-repeat;
}
.ds-illustration-slot__shape { position: absolute; background: var(--_hue); }
.ds-illustration-slot__shape[data-shape="circle"] { inline-size: 26cqi; aspect-ratio: 1; border-radius: var(--ds-radius-pill); }
.ds-illustration-slot__shape[data-shape="square"] { inline-size: 18cqi; aspect-ratio: 1; border-radius: var(--ds-radius-xs); rotate: 12deg; }
.ds-illustration-slot__shape[data-shape="bar"] { inline-size: 6cqi; block-size: 30cqi; border-radius: var(--ds-radius-xs); }
.ds-illustration-slot__shape[data-shape="star"] { inline-size: 10cqi; aspect-ratio: 1; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ds-illustration-slot__stroke { position: absolute; inset: 8%; inline-size: auto; block-size: auto; max-inline-size: 84%; max-block-size: 84%; margin: auto; }
.ds-illustration-slot__stroke [data-accent] { stroke: var(--ds-accent); }
.ds-illustration-slot__stroke [data-dashed] { stroke-dasharray: 4 3; }
.ds-illustration-slot__plate {
position: absolute;
inset: 0;
background:
radial-gradient(90% 70% at 25% 15%, var(--ds-data-6-tint), transparent 60%),
radial-gradient(80% 60% at 85% 90%, var(--_hue), transparent 55%),
linear-gradient(to bottom, var(--_ground), color-mix(in srgb, var(--_ground) 60%, var(--ds-ink)));
}
[data-register="photo"] .ds-illustration-slot__frame { background: var(--ds-surface-inverse); }
.ds-illustration-slot__glow {
position: absolute;
inset-block-start: 22%;
inset-inline-start: 50%;
inline-size: 18cqi;
aspect-ratio: 1;
translate: -50% 0;
border-radius: var(--ds-radius-pill);
background: var(--ds-ink-inverse);
box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__glow::before {
content: "";
position: absolute;
inset: -120%;
border-radius: var(--ds-radius-pill);
background: radial-gradient(circle, color-mix(in srgb, var(--ds-ink-inverse) 35%, transparent), transparent 60%);
z-index: -1;
}
.ds-illustration-slot__glow::after {
content: "";
position: absolute;
inset-block-start: 180%;
inset-inline: 30%;
block-size: 140%;
background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-ink-inverse) 40%, transparent), transparent);
-webkit-mask-image: repeating-linear-gradient(to bottom, var(--ds-ink) 0 2px, transparent 2px 5px);
mask-image: repeating-linear-gradient(to bottom, var(--ds-ink) 0 2px, transparent 2px 5px);
}
[data-register="generated"] .ds-illustration-slot__frame {
background: conic-gradient(from 210deg at 60% 40%, var(--ds-accent-tint), var(--ds-data-7-tint), var(--ds-accent-2-tint), var(--ds-data-5-tint), var(--ds-accent-tint));
}
.ds-illustration-slot__pattern {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 100%, transparent 30%, var(--ds-texture-color) 30.5%, var(--ds-texture-color) 42%, transparent 42.5%),
radial-gradient(circle at 80% 100%, transparent 52%, var(--ds-texture-color) 52.5%, var(--ds-texture-color) 64%, transparent 64.5%);
}
.ds-illustration-slot__globe {
position: absolute;
inset: 0;
border-radius: var(--ds-radius-pill);
border: 1px solid var(--_ink);
background:
radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--_ink) 40%, transparent), transparent 60%);
}
.ds-illustration-slot__globe::before, .ds-illustration-slot__globe::after {
content: "";
position: absolute;
inset: 0 30%;
border-radius: var(--ds-radius-pill);
border: 1px solid var(--_ink);
}
.ds-illustration-slot__globe::after { inset: 30% 0; }
.ds-illustration-slot__toast {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4cqi;
inline-size: 60%;
padding: 4cqi 5cqi;
border-radius: var(--ds-radius-md);
background: var(--ds-surface);
box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__toast::before {
content: "";
position: absolute;
inset: 40% 6% -14%;
z-index: -1;
border-radius: var(--ds-radius-md);
background: var(--ds-surface);
box-shadow: var(--ds-shadow-object);
}
.ds-illustration-slot__toast-disc { inline-size: 10cqi; aspect-ratio: 1; border-radius: var(--ds-radius-pill); background: var(--ds-data-3-tint); }
.ds-illustration-slot__toast-lines { display: flex; flex-direction: column; gap: 2cqi; }
.ds-illustration-slot__toast-lines > i { display: block; block-size: 2.4cqi; border-radius: var(--ds-radius-pill); background: var(--ds-ink); inline-size: 55%; }
.ds-illustration-slot__toast-lines > i + i { inline-size: 35%; background: var(--ds-ink-muted); }
.ds-illustration-slot__world { position: relative; inline-size: 50%; aspect-ratio: 1; }
.ds-illustration-slot__world > i {
position: absolute;
inset: 20% 10%;
background: var(--_hue);
transform: rotateX(60deg) rotateZ(45deg);
border-radius: var(--ds-radius-xs);
}
.ds-illustration-slot__world > i:nth-child(2) { inset: 8% 22% 32%; background: var(--_hue-2); }
.ds-illustration-slot__world > i:nth-child(3) { inset: -4% 34% 44%; background: var(--ds-data-3); }
.ds-illustration-slot[data-variant="elevenlabs-sticker-stack"] { --_ratio: 1; --_size: 180px; --_ground: var(--ds-surface-2); --_radius: var(--ds-radius-xl); }
.ds-illustration-slot[data-variant="manychat-64-square-well-left"] { --_ground: var(--ds-data-3-tint); }
.ds-illustration-slot[data-variant="braintrust-sub-perceptual-pattern"] { --_ratio: 220 / 272; --_size: 220px; --_ground: var(--ds-data-6-tint); --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="heron-technical-line-art"] { --_ratio: 4 / 3; --_ground: transparent; --_radius: 0; }
.ds-illustration-slot[data-variant="heron-technical-line-art"] .ds-illustration-slot__frame { border: var(--ds-border-width) solid var(--ds-rule); }
.ds-illustration-slot[data-variant="legend-cinematic-plate"] { --_ground: var(--ds-surface-inverse); --_hue: var(--ds-data-2); }
.ds-illustration-slot[data-variant="intercom-ink-drawings-3d-render"] { --_ink: var(--ds-ink); --_ratio: 1; --_radius: 0; }
.ds-illustration-slot[data-variant="intercom-ink-drawings-3d-render"][data-register="photo"] { --_hue: var(--ds-data-4); --_ground: var(--ds-data-4-tint); }
.ds-illustration-slot[data-variant="plane-mascot-band"] { --_ratio: 6 / 1; --_ground: var(--ds-data-7); --_radius: 0; }
.ds-illustration-slot[data-variant="plane-mascot-band"] .ds-illustration-slot__frame { display: flex; justify-content: space-around; align-items: flex-end; overflow: hidden; }
.ds-illustration-slot[data-variant="plane-mascot-band"] .ds-illustration-slot__mascot { inline-size: 9%; margin-block-end: -3%; }
.ds-illustration-slot[data-variant="homerun-guide-card-grounds"] { --_ratio: 4 / 3; --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="fibery-two-register"] { --_ratio: 1; }
.ds-illustration-slot[data-variant="fibery-two-register"][data-register="line"] { --_ink: var(--ds-ink); --_ground: transparent; }
.ds-illustration-slot[data-variant="vercel-line-art-8pct"] { --_ground: var(--ds-surface); --_radius: var(--ds-radius-lg); }
.ds-illustration-slot[data-variant="vercel-line-art-8pct"] .ds-illustration-slot__frame { border: var(--ds-border-width) solid var(--ds-rule); }
.ds-illustration-slot[aria-busy="true"] .ds-illustration-slot__frame { background: var(--ds-skeleton); }
.ds-illustration-slot[aria-busy="true"] .ds-illustration-slot__frame > * { visibility: hidden; }
.ds-illustration-slot[data-state="empty"] .ds-illustration-slot__frame {
background: transparent;
outline: var(--ds-border-width) dashed var(--ds-rule-strong);
outline-offset: calc(-1 * var(--ds-border-width));
color: var(--ds-ink-muted);
font-family: var(--ds-font-mono);
font-size: var(--ds-text-xs);
letter-spacing: .06em;
text-transform: uppercase;
}