:root {
  
  
  --page:        #07080a;   
  --grey-800:    #0c0d0f;   
  --grey-700:    #111214;   
  --grey-600:    #1b1c1e;   
  --grey-500:    #2f3031;   
  --grey-400:    #434345;   
  --grey-300:    #6a6b6c;   
  --grey-200:    #9c9c9d;   
  --grey-100:    #cdcece;   
  --grey-50:     #e6e6e6;   
  --white:       #ffffff;   

  --text:        var(--white);
  --text-body:   var(--grey-200);
  --text-muted:  var(--grey-300);

  
  --line:            rgba(255, 255, 255, 0.06);
  --line-strong:     rgba(255, 255, 255, 0.08);
  --line-bright:     rgba(255, 255, 255, 0.14);
  --highlight-top:   rgba(255, 255, 255, 0.15);
  --fill-faint:      rgba(255, 255, 255, 0.03);
  --fill-soft:       rgba(255, 255, 255, 0.05);
  --fill-hover:      rgba(255, 255, 255, 0.10);

  
  --bullish: #27a644;
  --bearish: #eb5757;

  
  --dot-arrival: #f7c9ae;
  --dot-start:   #c2c2f7;

  

  
  --panel: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%);
  --panel-glass: linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.90) 75.88%);
  --panel-glass-solid: linear-gradient(137deg, rgba(17, 18, 20, 0.88) 4.87%, rgba(12, 13, 15, 0.94) 75.88%);

  
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-features: "calt", "kern", "liga", "ss03";
  --font-features-display: "calt", "kern", "liga" 0, "ss02", "ss03", "ss08";

  
  --t-display: 64px;   --lh-display: 70.4px;
  --t-h1:      48px;   --lh-h1:      52.8px;
  --t-h2:      36px;   --lh-h2:      44px;
  --t-lede:    24px;   --lh-lede:    32px;
  --t-h3:      20px;   --lh-h3:      28px;
  --t-lg:      16px;   --lh-lg:      24px;
  --t-body:    14px;   --lh-body:    22.4px;
  --t-small:   12px;   --lh-small:   20px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  --track: 0.2px;   

  
  --s-1: 4px;    --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;   --s-8: 40px;
  --s-9: 48px;   --s-10: 56px;  --s-11: 64px;  --s-12: 80px;
  --s-13: 96px;  --s-14: 112px; --s-15: 168px; --s-16: 224px;

  --section-y:  var(--s-16);   
  --gutter:     var(--s-6);    

  
  --w-page:   1204px;   
  --w-wide:   1110px;
  --w-mid:    1064px;
  --w-text:    746px;   

  
  --r-1: 4px;  --r-2: 6px;  --r-3: 8px;  --r-4: 12px;
  --r-5: 16px; --r-6: 20px; --r-7: 30px;

  
  
  --ring:        inset 0 0 0 1px var(--line);
  --ring-top:    inset 0 1px 1px var(--highlight-top);
  --shadow-btn:  0 0 0 2px rgba(0, 0, 0, 0.5),
                 0 0 14px rgba(255, 255, 255, 0.19),
                 inset 0 -1px 0.4px rgba(0, 0, 0, 0.2),
                 inset 0 1px 0.4px #ffffff;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.12),
                 0 24px 60px rgba(0, 0, 0, 0.45);
  --blur-nav:    blur(5px);
  --blur-card:   blur(20px);

  
  --e-hover:    0.2s ease;
  --e-link:     0.3s ease;
  --e-card:     0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  --e-entrance: 1.5s cubic-bezier(0.05, 0.9, 0.1, 1);
  --e-pop:      0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --e-dialog:   0.15s ease;
  --rise:       1s ease;        
  --stagger:    80ms;
}

@media (max-width: 720px) {
  :root {
    --section-y: var(--s-15);   
    --gutter:    var(--s-4);    

    --t-display: 40px;   --lh-display: 46px;
    --t-h1:      32px;   --lh-h1:      38px;
    --t-h2:      26px;   --lh-h2:      32px;
    --t-lede:    18px;   --lh-lede:    27px;
  }
}

:root { color-scheme: dark; }