:root {
  --c-grey-950: #111216;
  --c-grey-900: #22252e;
  --c-grey-850: #2b2d33;
  --c-grey-800: #3a3e4a;
  --c-grey-700: #4f5566;
  --c-grey-600: #5f636e;
  --c-grey-500: #8a90a0;
  --c-grey-400: #9aa3b5;
  --c-grey-300: #b8bdc8;
  --c-grey-200: #c9cdd6;
  --c-grey-150: #d5d9e2;
  --c-grey-100: #e6ecf6;
  --c-grey-75: #eef2f8;
  --c-grey-50: #f2f5fb;
  --c-grey-25: #f4f6fa;
  --c-white: #ffffff;
  --c-blue-grey-300: #b9c6e0;
  --c-blue-grey-200: #c9d2e3;
  --c-blue-50: #ebf2fe;
  --c-blue-100: #dde8fc;
  --c-blue-300: #9ac2ff;
  --c-blue-500: #4f98ff;
  --c-blue-600: #2c78e4;
  --c-blue-700: #1f5fd6;
  --c-orange-50: #fff1e3;
  --c-orange-200: #ffd3ae;
  --c-orange-300: #ffb066;
  --c-orange-500: #e06a00;
  --c-orange-700: #ac5300;
  --c-orange-800: #8a3f00;
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-2xl: 36px; --r-pill: 999px;
  --shadow-card: 0 7px 14px rgba(0,0,0,.25);
  --ease-out-expo: cubic-bezier(.22,1,.36,1);
  --ease-swift: cubic-bezier(.16,1,.3,1);
  --margin: 64px;
  --gutter: 32px;
  --text-sans-display: 88px;
  --text-sans-heading-1: 64px;
  --text-sans-heading-2: 34px;
  --text-sans-heading-3: 26px;
  --text-sans-heading-4: 20px;
  --text-sans-lead: 22px;
  --text-sans-body-l: 18px;
  --text-sans-body: 16px;
  --text-sans-body-s: 14px;
  --text-sans-button: 16px;
  --text-sans-button-l: 20px;
  --text-serif-display: 120px;
  --text-serif-headline: 56px;
  --text-serif-subhead: 44px;
  --text-serif-standfirst: 36px;
  --text-serif-lead: 28px;
  --text-serif-quote: 24px;
  --text-serif-figure-xl: 160px;
  --text-serif-figure-l: 96px;
  --text-serif-figure-s: 44px;
  --text-mono-label-l: 13px;
  --text-mono-label: 12px;
  --text-mono-caption: 11px;
  --text-mono-micro: 10px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 160px;
  --size-column-min: 340px;
  --size-fig-6-max-w: 433px;
  --indent-s: 40px;
  --indent-m: 120px;
  --indent-l: 340px;
  --indent-xl: 560px;
  --text-sans-subheading: 24px;
  --text-sans-button-xl: 28px;
  --text-art-about-heading: 44px;
  --text-art-chapter-number-famjam: 300px;
  --text-art-chapter-number-ds: 260px;
  --text-art-next-title: 176px;
  --size-chapter-number-col: 364px;
  --text-art-card-name: 80px;
  --text-art-cover-stack: 188.1px;
  --size-hero-height: 866px;
  --size-home-hero: 860px;
  --space-hero-top: 32px;
  --size-hero-meta-min: 668px;
  --space-hero-toggle-inset: 16px;
  --text-art-intro-lead: 128px;
  --text-art-intro-word: 140px;
  --size-word-window-w: 572px;
  --size-word-window-h: 400px;
  --size-card-column-min: 340px;
  --size-card-image-h: 592px;
  --text-art-marquee: 112px;
  --text-art-knockout-about: 230px;
  --text-art-knockout-me: 260px;
  --space-knockout-overlap: -170px;
  --space-knockout-me-top: 90px;
  --size-stat-min: 200px;
  --space-stats-gap: 72px;
  --size-about-right-col: 540px;
  --size-about-photo-w: 540px;
  --size-about-photo-h: 720px;
  --size-before-ux-name-min: 0px;
  --size-cert-w: 600px;
  --size-cert-h: 464px;
  --text-art-talk-lets: 250px;
  --text-art-talk-talk: 290px;
  --space-card-copy-side: 64px;
  --size-knockout-stroke: 14px;
  --text-art-card-number: 120px;
  --text-art-about-stat: 160px;
  --size-step-image-w: 180px;
  --size-step-image-h: 180px;
  --space-card-stagger: 72px;
  --size-cover-phones-h: 560px;
  --size-cover-phones-w: 560px;
  --size-cover-jam-stroke: 3px;
  --text-art-ds-cover-famjam: 176.3px;
  --text-art-ds-cover-design: 269.6px;
  --text-art-ds-cover-system: 191.7px;
  --size-ds-cover-side-max: 600px;
  --size-toggle-pill-h: 48px;
  --space-toggle-pill-x: 22px;
  --text-sans-toggle: 16px;
  --size-side-col-max: 329px;
  --text-art-hmw-line: 88px;
  --text-art-hmw-big: 150px;
  --size-finding-figure-min: 200px;
  --space-finding-gap: 40px;
  --size-clip-c1-w: 405px;
  --size-clip-c1-h: 820px;
  --size-clip-w: 240px;
  --size-clip-h: 480px;
  --size-trio-min: 300px;
  --size-stat-band-min: 300px;
  --size-pair-min: 300px;
  --size-photo-wide-h: 620px;
  --size-fig-4-h: 560px;
  --size-fig-7-h: 540px;
  --indent-tablet: 0px;
  --size-contents-max: 440px;
  --text-art-finding-lead: 160px;
  --space-finding-card-pad: 32px;
  --space-opener-kicker-top: 70px;
  --size-finding-figure-max-lead: 250px;
  --size-finding-figure-max: 218px;
  --size-wide-slot-min-h: 0px;
  --text-art-ds-loop-word: 72px;
  --space-ds-loop-pad: 32px;
  --size-ds-loop-step-min: 0px;
  --text-art-ds-hanging-quote: 200px;
  --text-art-ds-question: 560px;
  --size-ds-spec-visual-min: 300px;
  --size-ds-levels-w: 1156px;
  --size-ds-level-2-w: 920px;
  --size-ds-level-1-w: 560px;
  --size-ds-fix-card-min: 400px;
  --text-art-ds-stat-56: 320px;
  --text-art-ds-echo: 50px;
  --size-ds-learned-min: 300px;
  --size-ds-learned-max: 400px;
  --space-ds-echo-gap: -14px;
  --size-ds-measure-240: 240px;
  --size-ds-measure-420: 420px;
  --size-ds-measure-480: 480px;
  --size-ds-measure-500: 500px;
  --size-ds-measure-520: 520px;
  --size-ds-measure-600: 600px;
  --size-ds-stat-56-max: 444px;
  --size-ds-measure-511: 511px;
  --size-ds-measure-429: 429px;
  --size-ds-measure-560: 560px;
  --size-ds-measure-640: 640px;
  --size-ds-measure-680: 680px;
  --size-ds-measure-536: 536px;
  --size-ds-measure-556: 556px;
  --text-art-ds-fix-figure: 56px;
  --space-marquee-pad-top: 34px;
  --space-marquee-pad-bottom: 46px;
  --text-art-ds-cover-line: 137.7px;
  --space-ds-cover-word-gap: 16.5px;
  --size-p5-max-w: 480px;
  --size-p5-h: 360px;
  --size-ds-s3-h: 460px;
  --size-ds-node-w: 353px;
  --size-ds-library-h: 420px;
}
@media (max-width: 1199px) {
 :root {
  --margin: 32px;
  --gutter: 24px;
  --text-sans-display: 64px;
  --text-sans-heading-1: 48px;
  --text-sans-heading-2: 30px;
  --text-sans-heading-3: 24px;
  --text-sans-lead: 20px;
  --text-sans-body-l: 17px;
  --text-serif-display: 88px;
  --text-serif-headline: 44px;
  --text-serif-subhead: 36px;
  --text-serif-standfirst: 30px;
  --text-serif-lead: 24px;
  --text-serif-quote: 22px;
  --text-serif-figure-xl: 120px;
  --text-serif-figure-l: 72px;
  --text-serif-figure-s: 40px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 72px;
  --space-section: 120px;
  --size-fig-6-max-w: 577px;
  --indent-s: 0px;
  --indent-m: 40px;
  --indent-l: 80px;
  --indent-xl: 120px;
  --text-sans-subheading: 22px;
  --text-sans-button-xl: 24px;
  --text-art-about-heading: 36px;
  --text-art-chapter-number-famjam: 200px;
  --text-art-chapter-number-ds: 180px;
  --text-art-next-title: 120px;
  --size-chapter-number-col: 240px;
  --text-art-card-name: 64px;
  --text-art-cover-stack: 180px;
  --size-hero-height: 720px;
  --size-home-hero: 1024px;
  --space-hero-top: 24px;
  --size-hero-meta-min: 600px;
  --space-hero-toggle-inset: 0px;
  --text-art-intro-lead: 92px;
  --text-art-intro-word: 104px;
  --size-word-window-w: 390px;
  --size-word-window-h: 297px;
  --size-card-image-h: 320px;
  --text-art-marquee: 88px;
  --size-stat-min: 140px;
  --space-stats-gap: 24px;
  --size-about-right-col: 280px;
  --size-about-photo-w: 280px;
  --size-about-photo-h: 373px;
  --size-before-ux-name-min: 280px;
  --size-cert-w: 560px;
  --size-cert-h: 433px;
  --text-art-talk-lets: 180px;
  --text-art-talk-talk: 210px;
  --space-card-copy-side: 24px;
  --text-art-card-number: 96px;
  --text-art-about-stat: 88px;
  --space-card-stagger: 0px;
  --size-cover-phones-h: 400px;
  --size-cover-phones-w: 704px;
  --text-art-ds-cover-famjam: 207.2px;
  --text-art-ds-cover-design: 316.8px;
  --text-art-ds-cover-system: 225.3px;
  --size-ds-cover-side-max: 704px;
  --size-side-col-max: 577px;
  --text-art-hmw-line: 64px;
  --text-art-hmw-big: 120px;
  --size-finding-figure-min: 190px;
  --size-trio-min: 360px;
  --size-photo-wide-h: 329px;
  --size-fig-4-h: 300px;
  --size-fig-7-h: 290px;
  --indent-tablet: 80px;
  --size-contents-max: 10000px;
  --text-art-finding-lead: 120px;
  --text-art-ds-loop-word: 44px;
  --space-ds-loop-pad: 12px;
  --text-art-ds-question: 400px;
  --size-ds-spec-visual-min: 360px;
  --size-ds-levels-w: 704px;
  --size-ds-level-2-w: 563px;
  --size-ds-level-1-w: 436px;
  --text-art-ds-stat-56: 200px;
  --size-ds-learned-min: 704px;
  --size-ds-learned-max: 704px;
  --size-ds-measure-240: 704px;
  --size-ds-measure-420: 704px;
  --size-ds-measure-480: 704px;
  --size-ds-measure-500: 704px;
  --size-ds-measure-520: 704px;
  --size-ds-measure-600: 704px;
  --size-ds-stat-56-max: 240px;
  --size-ds-measure-511: 704px;
  --size-ds-measure-429: 704px;
  --size-ds-measure-560: 704px;
  --size-ds-measure-640: 704px;
  --size-ds-measure-680: 704px;
  --size-ds-measure-536: 704px;
  --size-ds-measure-556: 704px;
  --text-art-ds-fix-figure: 72px;
  --space-marquee-pad-top: 28px;
  --space-marquee-pad-bottom: 36px;
  --text-art-ds-cover-line: 131.8px;
  --space-ds-cover-word-gap: 15.8px;
  --size-p5-max-w: 330px;
  --size-p5-h: 248px;
  --size-ds-s3-h: 400px;
  --size-ds-library-h: 400px;
 }
}
@media (max-width: 699px) {
 :root {
  --margin: 16px;
  --gutter: 16px;
  --text-sans-display: 44px;
  --text-sans-heading-1: 36px;
  --text-sans-heading-2: 26px;
  --text-sans-heading-3: 22px;
  --text-sans-heading-4: 18px;
  --text-sans-lead: 18px;
  --text-sans-button-l: 18px;
  --text-serif-display: 56px;
  --text-serif-headline: 34px;
  --text-serif-subhead: 30px;
  --text-serif-standfirst: 26px;
  --text-serif-lead: 22px;
  --text-serif-quote: 20px;
  --text-serif-figure-xl: 88px;
  --text-serif-figure-l: 56px;
  --text-serif-figure-s: 36px;
  --text-mono-label-l: 12px;
  --text-mono-label: 11px;
  --text-mono-caption: 10px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-section: 80px;
  --size-column-min: 280px;
  --size-fig-6-max-w: 358px;
  --indent-m: 0px;
  --indent-l: 0px;
  --indent-xl: 0px;
  --text-sans-subheading: 20px;
  --text-sans-button-xl: 22px;
  --text-art-about-heading: 30px;
  --text-art-chapter-number-famjam: 128px;
  --text-art-chapter-number-ds: 110px;
  --text-art-next-title: 56px;
  --size-chapter-number-col: 0px;
  --text-art-card-name: 44px;
  --text-art-cover-stack: 103.5px;
  --size-hero-height: 600px;
  --size-home-hero: 844px;
  --space-hero-top: 16px;
  --size-hero-meta-min: 358px;
  --text-art-intro-lead: 64px;
  --text-art-intro-word: 72px;
  --size-word-window-w: 330px;
  --size-word-window-h: 206px;
  --size-card-column-min: 280px;
  --size-card-image-h: 170px;
  --text-art-marquee: 64px;
  --text-art-knockout-about: 120px;
  --text-art-knockout-me: 136px;
  --space-knockout-overlap: -89px;
  --space-knockout-me-top: 47px;
  --size-about-right-col: 358px;
  --size-about-photo-w: 358px;
  --size-about-photo-h: 477px;
  --size-before-ux-name-min: 358px;
  --size-cert-w: 358px;
  --size-cert-h: 277px;
  --text-art-talk-lets: 150px;
  --text-art-talk-talk: 180px;
  --space-card-copy-side: 20px;
  --size-knockout-stroke: 7px;
  --text-art-card-number: 72px;
  --size-step-image-w: 302px;
  --size-step-image-h: 227px;
  --size-cover-phones-h: 300px;
  --size-cover-phones-w: 358px;
  --size-cover-jam-stroke: 1.6px;
  --text-art-ds-cover-famjam: 105.3px;
  --text-art-ds-cover-design: 161.1px;
  --text-art-ds-cover-system: 114.5px;
  --size-ds-cover-side-max: 358px;
  --size-toggle-pill-h: 40px;
  --space-toggle-pill-x: 14px;
  --text-sans-toggle: 14px;
  --size-side-col-max: 358px;
  --text-art-hmw-line: 35px;
  --text-art-hmw-big: 80px;
  --size-finding-figure-min: 64px;
  --space-finding-gap: 12px;
  --size-clip-c1-w: 280px;
  --size-clip-c1-h: 567px;
  --size-clip-w: 280px;
  --size-clip-h: 560px;
  --size-trio-min: 280px;
  --size-stat-band-min: 160px;
  --size-pair-min: 280px;
  --size-photo-wide-h: 488px;
  --size-fig-4-h: 448px;
  --size-fig-7-h: 448px;
  --indent-tablet: 0px;
  --text-art-finding-lead: 56px;
  --space-finding-card-pad: 16px;
  --space-opener-kicker-top: 0px;
  --size-finding-figure-max-lead: 64px;
  --size-finding-figure-max: 64px;
  --size-wide-slot-min-h: 240px;
  --text-art-ds-loop-word: 48px;
  --space-ds-loop-pad: 20px;
  --size-ds-loop-step-min: 300px;
  --text-art-ds-hanging-quote: 120px;
  --text-art-ds-question: 240px;
  --size-ds-spec-visual-min: 280px;
  --size-ds-levels-w: 358px;
  --size-ds-level-2-w: 316px;
  --size-ds-level-1-w: 272px;
  --size-ds-fix-card-min: 280px;
  --text-art-ds-stat-56: 160px;
  --text-art-ds-echo: 25px;
  --size-ds-learned-min: 280px;
  --size-ds-learned-max: 358px;
  --space-ds-echo-gap: -7px;
  --size-ds-measure-240: 358px;
  --size-ds-measure-420: 358px;
  --size-ds-measure-480: 358px;
  --size-ds-measure-500: 358px;
  --size-ds-measure-520: 358px;
  --size-ds-measure-600: 358px;
  --size-ds-stat-56-max: 358px;
  --size-ds-measure-511: 358px;
  --size-ds-measure-429: 358px;
  --size-ds-measure-560: 358px;
  --size-ds-measure-640: 358px;
  --size-ds-measure-680: 358px;
  --size-ds-measure-536: 358px;
  --size-ds-measure-556: 358px;
  --text-art-ds-fix-figure: 56px;
  --space-marquee-pad-top: 17px;
  --space-marquee-pad-bottom: 23px;
  --text-art-ds-cover-line: 75.8px;
  --space-ds-cover-word-gap: 9.1px;
  --size-p5-max-w: 358px;
  --size-p5-h: 269px;
  --size-ds-s3-h: 320px;
  --size-ds-node-w: 318px;
  --size-ds-library-h: 320px;
 }
}