@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



html {
  font-size: 87.5%;
}



:root {
  color-scheme: light;

  
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
  --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
  --font-heading: var(--font-ui);
  --font-title: var(--font-body);

  
  --c-contrast-0: #fff;
  --c-contrast-10: #fbfbfb;
  --c-contrast-50: #f7f7f7;
  --c-contrast-75: #efefef;
  --c-contrast-100: #e8e8e8;
  --c-contrast-125: #e2e2e2;
  --c-contrast-150: #ddd;
  --c-contrast-200: #ccc;
  --c-contrast-300: #bbb;
  --c-contrast-400: #999;
  --c-contrast-450: #8a8a8a;
  --c-contrast-500: #777;
  --c-contrast-600: #666;
  --c-contrast-650: #505050;
  --c-contrast-700: #444;
  --c-contrast-800: #333;
  --c-contrast-850: #191919;
  --c-contrast-900: #161616;
  --c-contrast: #000;
  --c-rgba: 0, 0, 0;

  

  
  --c-main: #3c3fde;
  --c-main-rgb: 60, 63, 222;

  
  --c-alert: #e8311a;

  
  --c-links: var(--c-contrast-900); 
  --c-headings: var(--c-contrast-900);
  --c-excerpts: var(--c-contrast-650);
  --c-post-meta: var(--c-contrast-450); 
  --c-separator: var(--c-contrast-100); 
  --c-separator2: var(--c-contrast-125); 
  --c-text: var(--c-contrast-700); 
  --c-bg: var(--c-contrast-0);
  --c-bg-alt: var(--c-contrast-50);

  
  --c-media-surface: #ffffff;
  --c-media-edge: var(--c-contrast-75);

  
  --c-a-hover: var(--c-main);

  
  --c-nav: #111111;
  --c-nav-hov: #ff0000;
  --c-nav-blip: #ff0000;
  
  --c-head-top-bg: #ffffff;

  
  --c-on-head: #151c25;
  
  --c-head-hairline: rgba(21, 28, 37, 0.22);
  --c-foot-bg: #0a0a0a;
  --c-head-border: #efefef;
  --grad-head: linear-gradient(90deg, #366dae 0%, #e52a18 100%);
  --grad-head-sm: linear-gradient(90deg, #e40666 0%, #3c3fde 100%);
  --head-top-h: 60px;
  --nav-h: 60px;

  
  --strapline-size: 13px;

  
  --logo-h: 46px;
  --logo-h-sm: 34px;
  --logo-h-foot: 42px;

  
  --c-on-dark: #ffffff;
  --c-on-dark-soft: #b8bcc4;
  --c-focus: var(--c-main);
  --c-ad-outline: var(--c-contrast-150);

  
  --text-size: 14px; 

  
  --body-lh: 1.5;
  --text-lh: 1.714; 

  --excerpt-size: 15px;
  --excerpt-lh: 1.6;
  --post-content-size: 1.186rem; 
  --post-content-lh: 1.7;
  --post-content-gaps: 1.54em;

  --title-size-xs: 14px;
  --title-size-s: 16px;
  --title-size-n: 18px;
  --title-size-m: 20px;
  --title-size-l: 25px;
  --title-size-xl: 30px;
  --title-fw-semi: 600;
  --title-fw-bold: 700;

  
  --grid-p-title: var(--title-size-m);
  --grid-sm-p-title: var(--title-size-s);
  --grid-lg-p-title: var(--title-size-l);
  --small-p-title: var(--title-size-xs);

  
  --meta-size: 12px;
  --ui-size-s: 13px;
  --ui-size-xs: 11px;

  
  --main-width: 1240px; 
  --wrap-padding: 35px;
  --grid-gutter: 36px;
  --grid-row-gap: 36px; 
  --sidebar-width: 336px; 
  --sidebar-pad: 38px;
  --max-width-md: 680px;
  --block-wrap-mb: 55px; 

  
  --block-space-below: 26px;
  --block-pad-below: 13px;
  --block-border-weight: 1px;
  --block-line-width: 40px;
  --block-line-weight: 2px;

  --btn-height: 38px;
  --btn-shadow: 0 2px 7px -4px rgba(0, 0, 0, 0.16);
  --btn-f-size: 12px;
  --btn-f-weight: 600;
  --btn-pad: 0 17px;
  --btn-radius: 2px;

  
  --wrap-padding-sm: 20px;

  --media-radius: 10px; 
  --box-radius: 10px; 
  --radius: 2px; 

  --border-hair: 1px;
  --border-rule: 3px; 

  
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 36px;
  --sp-8: 55px;

  
  --spec-label-w: 230px;

  
  --thumb-device: 128px; 
  --thumb-card: 96px; 

  
  --shadow-card: 0 2px 15px -1px rgba(0, 0, 0, 0.06);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.12);
  --speed: 0.25s; 

  
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1400px;
}



@media (max-width: 359px) {
  :root {
    --wrap-padding-sm: 10px;
  }
}



@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-contrast-0: #101016;
    --c-contrast-10: #16161d;
    
    --c-head-top-bg: #101016;
    --c-on-head: #f4f4f5;
    --c-head-hairline: rgba(255, 255, 255, 0.24);
    --c-contrast-50: #1b1b22;
    --c-contrast-75: #1f1f27;
    
    --c-media-surface: #ffffff;
    --c-media-edge: #2a2a34;
    --c-contrast-100: #2a2a33;
    --c-contrast-125: #33333d;
    --c-contrast-150: #3a3a45;
    --c-contrast-200: #4a4a56;
    --c-contrast-300: #5a5a66;
    --c-contrast-400: #8b8b96;
    --c-contrast-450: #9b9ba6;
    --c-contrast-500: #bbb;
    --c-contrast-600: #c0c0c0;
    --c-contrast-650: #ccc;
    --c-contrast-700: #d1d1d1;
    --c-contrast-800: #ddd;
    --c-contrast-850: #ececec;
    --c-contrast-900: #f0f0f0;
    --c-contrast: #fff;
    --c-rgba: 255, 255, 255;

    --c-main: #8b8dff;
    --c-main-rgb: 139, 141, 255;
    --c-alert: #ff5a45;

    --c-headings: var(--c-contrast-850);

    --c-nav: var(--c-contrast-900);
    --c-nav-hov: #56c7e5;
    --c-nav-blip: #56c7e5;
    --c-head-border: var(--c-contrast-125);

    --c-ad-outline: var(--c-contrast-200);

    --shadow-card: 0 2px 15px -1px rgba(0, 0, 0, 0.5);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-contrast-0: #101016;
  --c-contrast-10: #16161d;
  
  --c-head-top-bg: #101016;
  --c-on-head: #f4f4f5;
  --c-head-hairline: rgba(255, 255, 255, 0.24);
  --c-contrast-50: #1b1b22;
  --c-contrast-75: #1f1f27;
    
    --c-media-surface: #ffffff;
    --c-media-edge: #2a2a34;
  --c-contrast-100: #2a2a33;
  --c-contrast-125: #33333d;
  --c-contrast-150: #3a3a45;
  --c-contrast-200: #4a4a56;
  --c-contrast-300: #5a5a66;
  --c-contrast-400: #8b8b96;
  --c-contrast-450: #9b9ba6;
  --c-contrast-500: #bbb;
  --c-contrast-600: #c0c0c0;
  --c-contrast-650: #ccc;
  --c-contrast-700: #d1d1d1;
  --c-contrast-800: #ddd;
  --c-contrast-850: #ececec;
  --c-contrast-900: #f0f0f0;
  --c-contrast: #fff;
  --c-rgba: 255, 255, 255;

  --c-main: #8b8dff;
  --c-main-rgb: 139, 141, 255;
  --c-alert: #ff5a45;

  --c-headings: var(--c-contrast-850);

  --c-nav: var(--c-contrast-900);
  --c-nav-hov: #56c7e5;
  --c-nav-blip: #56c7e5;
  --c-head-border: var(--c-contrast-125);

  --c-ad-outline: var(--c-contrast-200);

  --shadow-card: 0 2px 15px -1px rgba(0, 0, 0, 0.5);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.6);
}



html {
  background-color: var(--c-bg);
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
}