/* Xzopia — site styles (generated by build.py) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root {
  
  --orange-50:  #FBEDE5;
  --orange-100: #F6D8C6;
  --orange-200: #EDB69B;
  --orange-300: #E39270;
  --orange-400: #DE6E42;
  --orange-500: #D9552A; 
  --orange-600: #BE4620;
  --orange-700: #9C3818; 
  --orange-800: #7C2D14;
  --orange-900: #632512;

  
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBF9F5;
  --neutral-50:  #F5F1EA;
  --neutral-100: #ECE6DB;
  --neutral-200: #DED6C8;
  --neutral-300: #C6BCAB;
  --neutral-400: #9D9484;
  --neutral-500: #6F6659;
  --neutral-600: #4E4840;
  --neutral-700: #38332D;
  --neutral-800: #241F1B;
  --neutral-900: #1A1613; 
  --neutral-950: #100D0B; 

  
  --teal-50:   #E4EFED;  --teal-500:  #1E6E68; --teal-600:  #175853; --teal-700:  #114440;

  
  --green-50:  #E9F2E9;  --green-500: #2E8B57; --green-600: #237045; --green-700: #1A5636;
  --amber-50:  #FBF0DA;  --amber-500: #D89A18; --amber-600: #B07C0E; --amber-700: #855D08;
  --red-50:    #FaEBE6;  --red-500:   #D6412C; --red-600:   #BC3222; --red-700:   #97271A;
  --blue-50:   #EAF0F7;  --blue-500:  #2C6BB8; --blue-600:  #21569A; --blue-700:  #17427A;

  
  
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-active:     var(--orange-700);
  --brand-subtle:     var(--orange-50);
  --brand-strong:     var(--orange-700);
  --brand-ink:        var(--neutral-0); 
  --brand-contrast:   var(--neutral-0);

  
  --secondary:        var(--teal-600);
  --secondary-hover:  var(--teal-700);
  --secondary-subtle: var(--teal-50);

  
  --bg-page:       var(--neutral-50);
  --bg-subtle:     var(--neutral-100);
  --surface-card:  var(--neutral-0);
  --surface-raised:var(--neutral-0);
  --surface-inset: var(--neutral-50);
  --surface-ink:   var(--neutral-900); 

  
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);

  
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverted:  var(--neutral-0);
  --text-brand:     var(--orange-700); 
  --text-link:      var(--orange-700);
  --text-link-hover:var(--orange-800);

  
  --success:      var(--green-600);  --success-subtle: var(--green-50);
  --warning:      var(--amber-600);  --warning-subtle: var(--amber-50);
  --danger:       var(--red-600);    --danger-subtle:  var(--red-50);
  --info:         var(--blue-600);   --info-subtle:    var(--blue-50);

  
  --focus-ring:   var(--orange-500);
  --focus-ring-offset: var(--neutral-0);
}


[data-theme="dark"], .theme-dark {
  --bg-page:        var(--neutral-950);
  --bg-subtle:      var(--neutral-900);
  --surface-card:   var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --surface-inset:  var(--neutral-950);
  --surface-ink:    var(--neutral-950);

  --border-subtle:  #23262D;
  --border-default: #2E323A;
  --border-strong:  #40454E;

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-disabled:  var(--neutral-600);
  --text-inverted:  var(--neutral-900);
  --text-brand:     var(--orange-400);
  --text-link:      var(--orange-400);
  --text-link-hover:var(--orange-300);

  --brand-contrast: var(--neutral-0);
  --success-subtle: #10251A;
  --warning-subtle: #2A2109;
  --danger-subtle:  #2A1414;
  --info-subtle:    #101F35;
  --focus-ring-offset: var(--neutral-950);
}


:root {
  
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  
  --fw-regular:  400; 
  --fw-medium:   500; 
  --fw-semibold: 600; 
  --fw-bold:     700; 

  
  --fs-xs:   0.75rem;   
  --fs-sm:   0.875rem;  
  --fs-base: 1rem;      
  --fs-lg:   1.125rem;  
  --fs-xl:   1.25rem;   
  --fs-2xl:  1.5rem;    
  --fs-3xl:  1.875rem;  
  --fs-4xl:  2.25rem;   
  --fs-5xl:  3rem;      
  --fs-6xl:  3.75rem;   
  --fs-7xl:  4.5rem;    

  
  --lh-none:    1; 
  --lh-tight:   1.15; 
  --lh-snug:    1.3; 
  --lh-normal:  1.5; 
  --lh-relaxed: 1.65; 

  
  --ls-tighter: -0.03em; 
  --ls-tight:   -0.015em; 
  --ls-normal:  0; 
  --ls-wide:    0.02em; 
  --ls-wider:   0.08em;   

  
  --text-display: var(--fw-bold) var(--fs-6xl)/var(--lh-none) var(--font-display);
  --text-h1:      var(--fw-bold) var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-h2:      var(--fw-semibold) var(--fs-4xl)/var(--lh-tight) var(--font-display);
  --text-h3:      var(--fw-semibold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
  --text-h4:      var(--fw-semibold) var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --text-body-lg: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans);
  --text-body:    var(--fw-regular) var(--fs-base)/var(--lh-normal) var(--font-sans);
  --text-body-sm: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-sans);
  --text-label:   var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  --text-caption: var(--fw-regular) var(--fs-xs)/var(--lh-snug) var(--font-sans);
  --text-mono:    var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-mono);
}


:root {
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;  
  --space-2:   0.5rem;   
  --space-3:   0.75rem;  
  --space-4:   1rem;     
  --space-5:   1.25rem;  
  --space-6:   1.5rem;   
  --space-8:   2rem;     
  --space-10:  2.5rem;   
  --space-12:  3rem;     
  --space-16:  4rem;     
  --space-20:  5rem;     
  --space-24:  6rem;     
  --space-32:  8rem;     

  
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1360px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-24);
}


:root {
  
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md); 

  
  --border-1: 1px;
  --border-2: 2px;
  --border-accent: 3px; 

  
  --shadow-xs: 0 1px 2px rgba(26,22,19,0.06);
  --shadow-sm: 0 1px 3px rgba(26,22,19,0.08), 0 1px 2px rgba(26,22,19,0.06);
  --shadow-md: 0 4px 12px rgba(26,22,19,0.08), 0 2px 4px rgba(26,22,19,0.05);
  --shadow-lg: 0 12px 28px rgba(26,22,19,0.12), 0 4px 8px rgba(26,22,19,0.06);
  --shadow-xl: 0 24px 48px rgba(26,22,19,0.16), 0 8px 16px rgba(26,22,19,0.08);
  --shadow-focus: 0 0 0 3px rgba(217,85,42,0.35); 
  --shadow-inset: inset 0 1px 2px rgba(26,22,19,0.06);
}


:root {
  
  --dur-instant: 80ms;  
  --dur-fast: 140ms;    
  --dur-base: 220ms;    
  --dur-slow: 360ms;    
  --dur-slower: 560ms;  

  
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);    
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);       
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  

  
  --transition-colors: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); 
  --transition-transform: transform var(--dur-fast) var(--ease-out); 
  --transition-shadow: box-shadow var(--dur-base) var(--ease-standard); 
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; 
    --dur-fast: 0ms; 
    --dur-base: 0ms; 
    --dur-slow: 0ms; 
    --dur-slower: 0ms; 
  }
}


*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font: var(--text-h1); letter-spacing: var(--ls-tighter); }
h2 { font: var(--text-h2); letter-spacing: var(--ls-tight); }
h3 { font: var(--text-h3); }
h4 { font: var(--text-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: var(--transition-colors); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }

hr { border: 0; border-top: var(--border-1) solid var(--border-subtle); margin: var(--space-8) 0; }

::selection { background: var(--orange-200); color: var(--neutral-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }


.xz-eyebrow {
  font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-mono);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-brand);
}


.xz-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }




.xz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);letter-spacing:var(--ls-normal);border:var(--border-1) solid transparent;border-radius:var(--radius-control);padding:0 var(--space-4);height:40px;cursor:pointer;white-space:nowrap;transition:var(--transition-colors),var(--transition-transform),var(--transition-shadow);-webkit-user-select:none;user-select:none;text-decoration:none}
.xz-btn:active{transform:translateY(1px)}
.xz-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.xz-btn:disabled,.xz-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.xz-btn:hover{text-decoration:none}
.xz-btn svg{width:1.1em;height:1.1em;flex:none}
.xz-btn--primary{background:var(--neutral-900);color:var(--neutral-0)}
.xz-btn--primary:hover{background:var(--neutral-800)}
.xz-btn--brand{background:var(--orange-600);color:var(--brand-ink)}
.xz-btn--brand:hover{background:var(--orange-700)}
.xz-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-default)}
.xz-btn--secondary:hover{background:var(--surface-inset)}
.xz-btn--ghost{background:transparent;color:var(--text-primary)}
.xz-btn--ghost:hover{background:var(--surface-inset)}
.xz-btn--danger{background:var(--danger);color:#fff}
.xz-btn--danger:hover{background:var(--red-700)}
.xz-btn--sm{height:32px;padding:0 var(--space-3);font-size:var(--fs-xs)}
.xz-btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--fs-base)}
.xz-btn--block{display:flex;width:100%}


.xz-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control);border:var(--border-1) solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-colors)}
.xz-icon-btn:hover{background:var(--surface-inset);color:var(--text-primary)}
.xz-icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.xz-icon-btn:disabled{opacity:.5;cursor:not-allowed}
.xz-icon-btn--solid{background:var(--neutral-900);color:#fff}.xz-icon-btn--solid:hover{background:var(--neutral-800);color:#fff}
.xz-icon-btn--bordered{border-color:var(--border-default)}
.xz-icon-btn--sm{width:32px;height:32px}
.xz-icon-btn svg{width:20px;height:20px}


.xz-input,.xz-textarea,.xz-select{width:100%;font:var(--text-body-sm);color:var(--text-primary);background:var(--surface-card);border:var(--border-1) solid var(--border-default);border-radius:var(--radius-control);padding:0 var(--space-3);height:40px;transition:var(--transition-colors),var(--transition-shadow);box-sizing:border-box}
.xz-textarea{height:auto;min-height:96px;padding:var(--space-3);line-height:var(--lh-normal);resize:vertical}
.xz-input::placeholder,.xz-textarea::placeholder{color:var(--text-muted)}
.xz-input:hover,.xz-textarea:hover,.xz-select:hover{border-color:var(--border-strong)}
.xz-input:focus,.xz-textarea:focus,.xz-select:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus)}
.xz-input:disabled,.xz-textarea:disabled,.xz-select:disabled{background:var(--surface-inset);color:var(--text-disabled);cursor:not-allowed}
.xz-input[aria-invalid="true"],.xz-textarea[aria-invalid="true"]{border-color:var(--danger)}
.xz-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(220,59,59,.3)}
.xz-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F6659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-8)}
.xz-input--sm{height:32px;font-size:var(--fs-xs)}
.xz-input--with-icon{padding-left:var(--space-8)}


.xz-field{display:flex;flex-direction:column;gap:var(--space-2)}
.xz-label{font:var(--text-label);color:var(--text-primary)}
.xz-label .xz-req{color:var(--danger);margin-left:2px}
.xz-help{font:var(--text-caption);color:var(--text-muted)}
.xz-field-error{font:var(--text-caption);color:var(--danger)}


.xz-check,.xz-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);font:var(--text-body-sm);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}
.xz-check input,.xz-radio input{position:absolute;opacity:0;width:0;height:0}
.xz-check__box{width:18px;height:18px;flex:none;margin-top:1px;border:var(--border-2) solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:grid;place-items:center;transition:var(--transition-colors)}
.xz-radio__box{border-radius:var(--radius-pill)}
.xz-check__box svg{width:12px;height:12px;stroke:#fff;stroke-width:3.5;opacity:0;transition:opacity var(--dur-fast)}
.xz-radio__box::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform var(--dur-fast)}
.xz-check input:checked+.xz-check__box{background:var(--brand);border-color:var(--brand)}
.xz-check input:checked+.xz-check__box svg{opacity:1}
.xz-radio input:checked+.xz-radio__box{background:var(--brand);border-color:var(--brand)}
.xz-radio input:checked+.xz-radio__box::after{transform:scale(1)}
.xz-check input:focus-visible+.xz-check__box,.xz-radio input:focus-visible+.xz-radio__box{box-shadow:var(--shadow-focus)}
.xz-check input:disabled~*,.xz-radio input:disabled~*{opacity:.5}


.xz-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font:var(--text-body-sm);color:var(--text-primary)}
.xz-switch input{position:absolute;opacity:0;width:0;height:0}
.xz-switch__track{width:40px;height:22px;flex:none;border-radius:var(--radius-pill);background:var(--neutral-300);position:relative;transition:var(--transition-colors)}
.xz-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-standard)}
.xz-switch input:checked+.xz-switch__track{background:var(--brand)}
.xz-switch input:checked+.xz-switch__track::after{transform:translateX(18px)}
.xz-switch input:focus-visible+.xz-switch__track{box-shadow:var(--shadow-focus)}
.xz-switch input:disabled+.xz-switch__track{opacity:.5}


.xz-badge{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--fw-semibold) var(--fs-xs)/1 var(--font-sans);padding:4px 8px;border-radius:var(--radius-sm);background:var(--surface-inset);color:var(--text-secondary);border:var(--border-1) solid var(--border-subtle)}
.xz-badge--brand{background:var(--brand-subtle);color:var(--orange-800);border-color:transparent}
.xz-badge--solid{background:var(--neutral-900);color:#fff;border-color:transparent}
.xz-badge--success{background:var(--success-subtle);color:var(--green-700);border-color:transparent}
.xz-badge--warning{background:var(--warning-subtle);color:var(--amber-700);border-color:transparent}
.xz-badge--danger{background:var(--danger-subtle);color:var(--red-700);border-color:transparent}
.xz-badge--info{background:var(--info-subtle);color:var(--blue-700);border-color:transparent}
.xz-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}


.xz-tag{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);padding:5px 10px;border-radius:var(--radius-pill);background:var(--surface-inset);color:var(--text-secondary);border:var(--border-1) solid var(--border-default)}
.xz-tag__x{display:inline-flex;cursor:pointer;opacity:.6;transition:var(--transition-colors)}
.xz-tag__x:hover{opacity:1;color:var(--danger)}
.xz-tag__x svg{width:12px;height:12px}


.xz-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--neutral-200);color:var(--neutral-700);font:var(--fw-semibold) var(--fs-sm) var(--font-sans);overflow:hidden;flex:none}
.xz-avatar img{width:100%;height:100%;object-fit:cover}
.xz-avatar--brand{background:var(--brand);color:var(--brand-ink)}
.xz-avatar--ink{background:var(--neutral-900);color:#fff}
.xz-avatar--sm{width:28px;height:28px;font-size:var(--fs-xs)}
.xz-avatar--lg{width:56px;height:56px;font-size:var(--fs-lg)}


.xz-card{background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}
.xz-card--flat{box-shadow:none}
.xz-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.xz-card--interactive{cursor:pointer;transition:var(--transition-shadow),var(--transition-transform),var(--transition-colors)}
.xz-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.xz-card--accent{border-top:var(--border-accent) solid var(--brand)}
.xz-card__header{padding:var(--space-5) var(--space-6);border-bottom:var(--border-1) solid var(--border-subtle)}
.xz-card__body{padding:var(--space-6)}
.xz-card__footer{padding:var(--space-4) var(--space-6);border-top:var(--border-1) solid var(--border-subtle);background:var(--surface-inset)}


.xz-stat{background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.xz-stat__label{font:var(--fw-medium) var(--fs-xs) var(--font-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.xz-stat__value{font:var(--fw-bold) var(--fs-4xl)/1 var(--font-display);color:var(--text-primary);letter-spacing:var(--ls-tight);margin-top:var(--space-2)}
.xz-stat__delta{font:var(--fw-semibold) var(--fs-xs) var(--font-sans);margin-top:var(--space-2);display:inline-flex;align-items:center;gap:4px}
.xz-stat__delta--up{color:var(--success)}.xz-stat__delta--down{color:var(--danger)}


.xz-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-1) solid var(--border-subtle);background:var(--surface-inset);border-left:var(--border-accent) solid var(--neutral-400)}
.xz-alert__icon{flex:none;margin-top:1px}.xz-alert__icon svg{width:20px;height:20px}
.xz-alert__title{font:var(--fw-semibold) var(--fs-sm) var(--font-sans);color:var(--text-primary)}
.xz-alert__body{font:var(--text-body-sm);color:var(--text-secondary);margin-top:2px}
.xz-alert--info{background:var(--info-subtle);border-left-color:var(--info)}.xz-alert--info .xz-alert__icon{color:var(--info)}
.xz-alert--success{background:var(--success-subtle);border-left-color:var(--success)}.xz-alert--success .xz-alert__icon{color:var(--success)}
.xz-alert--warning{background:var(--warning-subtle);border-left-color:var(--warning)}.xz-alert--warning .xz-alert__icon{color:var(--warning)}
.xz-alert--danger{background:var(--danger-subtle);border-left-color:var(--danger)}.xz-alert--danger .xz-alert__icon{color:var(--danger)}


.xz-tooltip{position:relative;display:inline-flex}
.xz-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--neutral-900);color:#fff;font:var(--fw-medium) var(--fs-xs) var(--font-sans);padding:6px 10px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-fast);z-index:50}
.xz-tooltip__bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--neutral-900)}
.xz-tooltip:hover .xz-tooltip__bubble,.xz-tooltip:focus-within .xz-tooltip__bubble{opacity:1;transform:translateX(-50%) translateY(0)}


.xz-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--border-default);border-top-color:var(--brand);border-radius:50%;animation:xz-spin .7s linear infinite}
.xz-spinner--lg{width:32px;height:32px;border-width:3px}
@keyframes xz-spin{to{transform:rotate(360deg)}}


.xz-tabs{display:flex;gap:var(--space-1);border-bottom:var(--border-1) solid var(--border-subtle)}
.xz-tab{appearance:none;background:none;border:0;font:var(--fw-medium) var(--fs-sm) var(--font-sans);color:var(--text-secondary);padding:var(--space-3) var(--space-4);cursor:pointer;border-bottom:var(--border-2) solid transparent;margin-bottom:-1px;transition:var(--transition-colors)}
.xz-tab:hover{color:var(--text-primary)}
.xz-tab--active{color:var(--text-primary);border-bottom-color:var(--brand)}
.xz-tab:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}


.xz-crumbs{display:flex;align-items:center;gap:var(--space-2);font:var(--text-body-sm);color:var(--text-muted);flex-wrap:wrap}
.xz-crumbs a{color:var(--text-secondary)}.xz-crumbs a:hover{color:var(--text-brand)}
.xz-crumbs__sep{color:var(--border-strong)}
.xz-crumbs__current{color:var(--text-primary);font-weight:var(--fw-medium)}


.xz-dialog-backdrop{position:fixed;inset:0;background:rgba(14,15,19,.55);backdrop-filter:blur(2px);display:grid;place-items:center;padding:var(--space-4);z-index:100;animation:xz-fade var(--dur-base) var(--ease-standard)}
.xz-dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;overflow:hidden;animation:xz-pop var(--dur-base) var(--ease-out)}
.xz-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-3)}
.xz-dialog__title{font:var(--fw-semibold) var(--fs-xl) var(--font-display);color:var(--text-primary)}
.xz-dialog__body{padding:0 var(--space-6) var(--space-6);font:var(--text-body);color:var(--text-secondary)}
.xz-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--surface-inset);border-top:var(--border-1) solid var(--border-subtle)}
@keyframes xz-fade{from{opacity:0}to{opacity:1}}
@keyframes xz-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ---- site-wide additions for the static build ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg-page)}
img{max-width:100%}
a:hover{text-decoration:none}
.xz-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--neutral-900);color:#fff;padding:10px 16px;border-radius:var(--radius-md);font:600 14px var(--font-sans)}
.xz-skip:focus{top:12px;color:#fff}
[hidden]{display:none!important}
svg.lucide{width:1em;height:1em}
.xz-mobmenu[open] summary{background:var(--surface-card)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.xz-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* health check */
.xz-hc-btn{font:var(--fw-semibold) 14px var(--font-sans);padding:8px 16px;border-radius:99px;cursor:pointer;transition:all 150ms ease;border:1px solid var(--border-default);background:transparent;color:var(--text-primary)}
.xz-hc-btn:hover{border-color:var(--neutral-900)}
.xz-hc-btn[aria-pressed="true"]{background:var(--neutral-900);border-color:var(--neutral-900);color:#fff}
.xz-hc-bar{height:100%;width:0;background:var(--brand);border-radius:99px;transition:width 300ms ease,background-color 300ms ease}

/* news list */
.xz-chip{font:var(--fw-medium) 14px var(--font-sans);padding:8px 14px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all 150ms ease;white-space:nowrap;border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary)}
.xz-chip:hover{border-color:var(--neutral-900)}
.xz-chip-dot{width:7px;height:7px;border-radius:99px}
.xz-chip-count{font:var(--fw-semibold) 12px var(--font-mono);padding:1px 7px;border-radius:99px;background:var(--bg-subtle)}
.xz-chip[aria-pressed="true"]{background:var(--neutral-900);border-color:var(--neutral-900);color:#fff}
.xz-chip[aria-pressed="true"] .xz-chip-count{background:rgba(255,255,255,.16)}
.xz-chip[aria-pressed="true"][data-cat="All"] .xz-chip-dot{background:#fff!important}
.xz-search input::-webkit-search-cancel-button{cursor:pointer}
.xz-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:xz-spin .7s linear infinite}