:root, [data-theme="paper"] {
  --tr-indigo-500: #5e48ec;
  --tr-indigo-400: #6f5bef;
  --tr-indigo-300: #8c7cf9;
  --tr-indigo-200: #d7d1fa;
  --tr-indigo-100: #eeebfc;
  --tr-tangerine-500: #f5873f;
  --tr-neutral-900: #131313;
  --tr-neutral-800: #262626;
  --tr-neutral-700: #3a3a3a;
  --tr-neutral-500: #6e6e6e;
  --tr-neutral-300: #ababab;
  --tr-neutral-200: #dedede;
  --tr-neutral-100: #ededed;
  --tr-neutral-50: #f6f6f6;
  --tr-neutral-0: #ffffff;
  --tr-cool-200: #e2e3e9;
  --tr-cool-100: #e9eaf0;
  --tr-cool-50: #f0f1f5;
  --tr-alpha-white-07: #ffffff12;
  --tr-alpha-white-08: #ffffff14;
  --tr-alpha-white-10: #ffffff1a;
  --tr-alpha-white-12: #ffffff1f;
  --tr-alpha-white-20: #ffffff33;
  --tr-alpha-white-24: #ffffff3d;
  --tr-alpha-white-34: #ffffff57;
  --tr-alpha-white-38: #ffffff61;
  --tr-alpha-white-42: #ffffff6b;
  --tr-alpha-white-55: #ffffff8c;
  --tr-alpha-white-60: #ffffff99;
  --tr-alpha-charcoal-08: #13131314;
  --tr-alpha-charcoal-12: #1313131f;
  --tr-alpha-charcoal-16: #13131329;
  --tr-alpha-charcoal-18: #1313132e;
  --tr-alpha-charcoal-20: #13131333;
  --tr-alpha-charcoal-30: #1313134d;
  --tr-alpha-charcoal-32: #13131352;
  --tr-alpha-charcoal-40: #13131366;
  --tr-alpha-charcoal-45: #13131373;
  --tr-alpha-charcoal-55: #1313138c;
  --tr-alpha-black-12: #0000001f;
  --tr-alpha-black-18: #0000002e;
  --tr-alpha-black-30: #0000004d;
  --tr-alpha-black-35: #00000059;
  --tr-alpha-black-70: #000000b2;
  --tr-alpha-indigo-00: #5e48ec00;
  --tr-alpha-indigo-06: #5e48ec0f;
  --tr-alpha-indigo-22: #5e48ec38;
  --tr-alpha-indigo-80: #5e48eccc;
  --tr-alpha-indigo-84: #5e48ecd6;
  --tr-alpha-indigo-bright-66: #7a68ffa8;
  --tr-alpha-indigo-bright-70: #7a68ffb2;
  --tr-alpha-indigo-light-80: #d7d1facc;
  --tr-alpha-indigo-pale-62: #ebe8fd9e;
  --tr-alpha-clear: #ffffff00;
  --tr-color-ground: var(--tr-neutral-0);
  --tr-color-text: var(--tr-neutral-900);
  --tr-color-text-2: var(--tr-neutral-500);
  --tr-color-meta: var(--tr-neutral-500);
  --tr-color-hairline: var(--tr-neutral-200);
  --tr-color-fill: var(--tr-neutral-100);
  --tr-color-accent: var(--tr-indigo-500);
  --tr-color-accent-fill: var(--tr-indigo-500);
  --tr-color-on-accent: var(--tr-neutral-0);
  --tr-color-mark-quiet: var(--tr-neutral-300);
  --tr-color-review: var(--tr-tangerine-500);
  --tr-color-validated: var(--tr-indigo-500);
  --tr-color-signal: var(--tr-tangerine-500);
  --tr-color-on-signal: var(--tr-neutral-900);
  --tr-keyart-line: var(--tr-alpha-charcoal-16);
  --tr-keyart-line-start: var(--tr-alpha-charcoal-40);
  --tr-keyart-node: var(--tr-indigo-500);
  --tr-keyart-node-ring: var(--tr-color-ground);
  --tr-keyart-dots: var(--tr-alpha-charcoal-20);
  --tr-keyart-folder-back: var(--tr-indigo-500);
  --tr-keyart-glass-top: var(--tr-alpha-indigo-bright-70);
  --tr-keyart-glass-bottom: var(--tr-alpha-indigo-84);
  --tr-keyart-glass-edge: var(--tr-alpha-white-42);
  --tr-keyart-glass-rim: var(--tr-alpha-white-08);
  --tr-keyart-archive-back: var(--tr-cool-200);
  --tr-keyart-tile-shade: var(--tr-cool-50);
  --tr-keyart-card-back: var(--tr-cool-100);
  --tr-keyart-card-mid: var(--tr-cool-50);
  --tr-keyart-paper: var(--tr-neutral-0);
  --tr-keyart-scan: var(--tr-neutral-50);
  --tr-keyart-ink-strong: var(--tr-alpha-charcoal-55);
  --tr-keyart-ink: var(--tr-alpha-charcoal-32);
  --tr-keyart-ink-soft: var(--tr-alpha-charcoal-18);
  --tr-keyart-ink-faint: var(--tr-alpha-charcoal-12);
  --tr-keyart-highlight: var(--tr-alpha-indigo-06);
  --tr-keyart-glow: var(--tr-alpha-indigo-22);
  --tr-keyart-glow-edge: var(--tr-alpha-indigo-00);
  --tr-shadow-ring: var(--tr-alpha-charcoal-08);
  --tr-shadow-contact: var(--tr-alpha-charcoal-08);
  --tr-shadow-mid: var(--tr-alpha-charcoal-08);
  --tr-shadow-fall: var(--tr-alpha-charcoal-30);
  --tr-shadow-sheet-contact: var(--tr-alpha-black-12);
  --tr-shadow-sheet-fall: var(--tr-alpha-black-35);
  --tr-shadow-small: var(--tr-alpha-charcoal-45);
  --tr-shadow-archive: var(--tr-alpha-black-18);
  --tr-depth-object: 0 0 0 1px #13131314, 0 1px 2px 0 #13131314, 0 4px 10px -4px #13131314, 0 26px 50px -24px #1313134d;
  --tr-depth-sheet: 0 1px 2px 0 #0000001f, 0 10px 24px -12px #00000059;
  --tr-depth-small: 0 10px 24px -10px #13131373;
  --tr-depth-archive: 0 16px 18px 0 #0000002e;
  --tr-glass-frosted: inset 0 1px 0 0 #ffffff6b, inset 0 0 0 1px #ffffff14;
}
[data-theme="charcoal"] {
  --tr-color-ground: var(--tr-neutral-900);
  --tr-color-text: var(--tr-neutral-0);
  --tr-color-text-2: var(--tr-neutral-300);
  --tr-color-meta: var(--tr-neutral-300);
  --tr-color-hairline: var(--tr-neutral-700);
  --tr-color-fill: var(--tr-neutral-800);
  --tr-color-accent: var(--tr-indigo-300);
  --tr-color-accent-fill: var(--tr-indigo-500);
  --tr-color-on-accent: var(--tr-neutral-0);
  --tr-color-mark-quiet: var(--tr-neutral-500);
  --tr-color-review: var(--tr-tangerine-500);
  --tr-color-validated: var(--tr-indigo-500);
  --tr-color-signal: var(--tr-tangerine-500);
  --tr-color-on-signal: var(--tr-neutral-900);
  --tr-keyart-line: var(--tr-alpha-white-20);
  --tr-keyart-line-start: var(--tr-alpha-white-55);
  --tr-keyart-node: var(--tr-indigo-300);
  --tr-keyart-node-ring: var(--tr-color-ground);
  --tr-keyart-dots: var(--tr-alpha-white-10);
  --tr-keyart-folder-back: var(--tr-indigo-500);
  --tr-keyart-glass-top: var(--tr-alpha-indigo-bright-66);
  --tr-keyart-glass-bottom: var(--tr-alpha-indigo-80);
  --tr-keyart-glass-edge: var(--tr-alpha-white-38);
  --tr-keyart-glass-rim: var(--tr-alpha-white-07);
  --tr-keyart-archive-back: var(--tr-cool-100);
  --tr-keyart-tile-shade: var(--tr-cool-100);
  --tr-keyart-card-back: var(--tr-cool-100);
  --tr-keyart-card-mid: var(--tr-cool-50);
  --tr-keyart-paper: var(--tr-neutral-0);
  --tr-keyart-scan: var(--tr-neutral-50);
  --tr-keyart-ink-strong: var(--tr-alpha-charcoal-55);
  --tr-keyart-ink: var(--tr-alpha-charcoal-32);
  --tr-keyart-ink-soft: var(--tr-alpha-charcoal-18);
  --tr-keyart-ink-faint: var(--tr-alpha-charcoal-12);
  --tr-keyart-highlight: var(--tr-alpha-indigo-06);
  --tr-keyart-glow: var(--tr-alpha-indigo-22);
  --tr-keyart-glow-edge: var(--tr-alpha-indigo-00);
  --tr-shadow-ring: var(--tr-alpha-clear);
  --tr-shadow-contact: var(--tr-alpha-black-30);
  --tr-shadow-mid: var(--tr-alpha-clear);
  --tr-shadow-fall: var(--tr-alpha-black-70);
  --tr-shadow-sheet-contact: var(--tr-alpha-black-12);
  --tr-shadow-sheet-fall: var(--tr-alpha-black-35);
  --tr-shadow-small: var(--tr-alpha-charcoal-45);
  --tr-shadow-archive: var(--tr-alpha-black-18);
  --tr-depth-object: 0 1px 2px 0 #0000004d, 0 20px 44px -16px #000000b2;
  --tr-depth-sheet: 0 1px 2px 0 #0000001f, 0 10px 24px -12px #00000059;
  --tr-depth-small: 0 10px 24px -10px #13131373;
  --tr-depth-archive: 0 16px 18px 0 #0000002e;
  --tr-glass-frosted: inset 0 1px 0 0 #ffffff61, inset 0 0 0 1px #ffffff12;
}
[data-theme="indigo"] {
  --tr-color-ground: var(--tr-indigo-500);
  --tr-color-text: var(--tr-neutral-0);
  --tr-color-text-2: var(--tr-indigo-200);
  --tr-color-meta: var(--tr-neutral-0);
  --tr-color-hairline: var(--tr-alpha-white-24);
  --tr-color-fill: var(--tr-indigo-400);
  --tr-color-accent: var(--tr-neutral-0);
  --tr-color-accent-fill: var(--tr-neutral-0);
  --tr-color-on-accent: var(--tr-indigo-500);
  --tr-color-mark-quiet: var(--tr-alpha-white-34);
  --tr-color-review: var(--tr-tangerine-500);
  --tr-color-validated: var(--tr-indigo-500);
  --tr-color-signal: var(--tr-tangerine-500);
  --tr-color-on-signal: var(--tr-neutral-900);
  --tr-keyart-line: var(--tr-alpha-white-34);
  --tr-keyart-line-start: var(--tr-alpha-white-55);
  --tr-keyart-node: var(--tr-indigo-200);
  --tr-keyart-node-ring: var(--tr-color-ground);
  --tr-keyart-dots: var(--tr-alpha-white-10);
  --tr-keyart-folder-back: var(--tr-indigo-200);
  --tr-keyart-glass-top: var(--tr-alpha-indigo-pale-62);
  --tr-keyart-glass-bottom: var(--tr-alpha-indigo-light-80);
  --tr-keyart-glass-edge: var(--tr-alpha-white-60);
  --tr-keyart-glass-rim: var(--tr-alpha-white-12);
  --tr-keyart-archive-back: var(--tr-indigo-100);
  --tr-keyart-tile-shade: var(--tr-indigo-100);
  --tr-keyart-card-back: var(--tr-cool-100);
  --tr-keyart-card-mid: var(--tr-cool-50);
  --tr-keyart-paper: var(--tr-neutral-0);
  --tr-keyart-scan: var(--tr-neutral-50);
  --tr-keyart-ink-strong: var(--tr-alpha-charcoal-55);
  --tr-keyart-ink: var(--tr-alpha-charcoal-32);
  --tr-keyart-ink-soft: var(--tr-alpha-charcoal-18);
  --tr-keyart-ink-faint: var(--tr-alpha-charcoal-12);
  --tr-keyart-highlight: var(--tr-alpha-indigo-06);
  --tr-keyart-glow: var(--tr-alpha-indigo-22);
  --tr-keyart-glow-edge: var(--tr-alpha-indigo-00);
  --tr-shadow-ring: var(--tr-alpha-clear);
  --tr-shadow-contact: var(--tr-alpha-charcoal-18);
  --tr-shadow-mid: var(--tr-alpha-clear);
  --tr-shadow-fall: var(--tr-alpha-charcoal-45);
  --tr-shadow-sheet-contact: var(--tr-alpha-black-12);
  --tr-shadow-sheet-fall: var(--tr-alpha-black-35);
  --tr-shadow-small: var(--tr-alpha-charcoal-45);
  --tr-shadow-archive: var(--tr-alpha-black-18);
  --tr-depth-object: 0 1px 2px 0 #1313132e, 0 20px 44px -18px #13131373;
  --tr-depth-sheet: 0 1px 2px 0 #0000001f, 0 10px 24px -12px #00000059;
  --tr-depth-small: 0 10px 24px -10px #13131373;
  --tr-depth-archive: 0 16px 18px 0 #0000002e;
  --tr-glass-frosted: inset 0 1px 0 0 #ffffff99, inset 0 0 0 1px #ffffff1f;
}
:root {
  --tr-space-8: 8px;
  --tr-space-16: 16px;
  --tr-space-24: 24px;
  --tr-space-32: 32px;
  --tr-space-48: 48px;
  --tr-space-64: 64px;
  --tr-space-96: 96px;
  --tr-space-128: 128px;
  --tr-radius-sm: 4px;
  --tr-radius-md: 12px;
  --tr-radius-pill: 999px;
  --tr-glass-blur: 8px;
  --tr-stroke-hairline: 1px;
  --tr-stroke-lane: 1.25px;
  --tr-stroke-ring: 1.5px;
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;
}
.slide-display {
  font-family: var(--font-sans);
  font-size: 200px;
  line-height: 184px;
  font-weight: 400;
  letter-spacing: -0.05em;
}
.slide-figure {
  font-family: var(--font-sans);
  font-size: 120px;
  line-height: 112px;
  font-weight: 400;
  letter-spacing: -0.045em;
}
.slide-headline {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 84px;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.slide-lead {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.slide-body {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.slide-label {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0em;
}
.slide-meta {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-hero-headline {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 72px;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.web-hero-lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-nav {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0em;
}
.mono-code {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0em;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
