:root{--system-fonts:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}body,h1,h2,h3,h4,h5,h6,p,blockquote,code,pre,ol,ul,li,dl,dt,dd,img,figure,figcaption,audio,video,canvas,iframe,details,summary,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0}html{font-size:var(--root-font-size);line-height:1.5;scroll-behavior:smooth}*,::before,::after{box-sizing:border-box}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1.00rem}h5{font-size:.83rem}h6{font-size:.67rem}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}summary{display:list-item;cursor:pointer}table{border-collapse:collapse;border-spacing:0}pre{white-space:pre-wrap}[type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[hidden]{display:none !important}:focus:not(:focus-visible){outline:0}input[type='button'],button{cursor:pointer}[disabled]{cursor:not-allowed}a,area,button,input,label,select,summary,textarea,details,[tabindex]{touch-action:manipulation}:root {
  --root-font-size: 17px;
  --root-line-height: 1.5;

  --color-gray--0: #fafafa;
  --color-gray--100: #f5f5f5;
  --color-gray--200: #e5e5e5;
  --color-gray--300: #d4d4d4;
  --color-gray--400: #a3a3a3;
  --color-gray--500: #737373;
  --color-gray--600: #525252;
  --color-gray--700: #404040;
  --color-gray--800: #262626;
  --color-gray--900: #171717;
}@media (min-width: 550px) {:root {
    --root-font-size: 18px;
}
  }:root{

  --color-green: #51cf66;
  --color-red: #ff6b6b;
  --color-yellow: #fcc419;
  --color-blue: #74c0fc;
  --color-purple: #8888fc;

  --color-green-offset: rgba(81, 207, 102, 0.05);
  --color-red-offset: rgba(255, 107, 107, 0.05);
  --color-yellow-offset: rgba(252, 196, 25, 0.05);
  --color-blue-offset: rgba(116, 192, 252, 0.05);
  --color-purple-offset: rgba(136, 136, 252, 0.05);

  --color-green-offset--100: rgba(81, 207, 102, 0.1);
  --color-red-offset--100: rgba(255, 107, 107, 0.1);
  --color-yellow-offset--100: rgba(252, 196, 25, 0.1);
  --color-blue-offset--100: rgba(116, 192, 252, 0.1);
  --color-purple-offset--100: rgba(136, 136, 252, 0.1);

  --color-green-background: #fefff8;
  --color-red-background: hsl(0, 100%, 99%);
  --color-yellow-background: hsl(42, 100%, 99%);
  --color-blue-background: hsl(206, 100%, 99%);
  --color-purple-background: hsl(240, 80%, 99%);

  --link-color: var(--color-text);
  --link-hover: var(--color-purple);
  --color-body-background: white /* #FDFDFA */;
  --color-text: var(--color-gray--700);
  --color-header: var(--color-gray--700);
  --color-border: var(--color-gray--200);
  --color-caption: var(--color-gray--500);

  --font-code: 'Source Code Pro', 'IBM Plex Mono', Consolas, Menlo, Monaco,
    monospace;
  --font-body: 'GT America', 'Inter', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-header: 'Ivar Text', Charter, Georgia, Times New Roman, serif;

  --section-color: var(--color-green);
  --section-color-offset: var(--color-border);
  --section-color-rgb: 255, 255, 255;

  --shadow-small: 0 0 transparent, 0 0 transparent,
    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 0 transparent, 0 0 transparent,
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 0 transparent, 0 0 transparent,
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --heading-scale: 1}[data-section='blog'] {
  --section-color: var(--color-red);
  --section-color-offset: var(--color-red-offset);
  --section-color-rgb: 255, 107, 107;
}[data-section='notes'] {
  --section-color: var(--color-purple);
  --section-color-offset: var(--color-purple-offset);
  --section-color-rgb: 136, 136, 252;
}[data-section='style-guide'] {
  --section-color: var(--color-yellow);
  --section-color-offset: var(--color-yellow-offset);
  --section-color-rgb: 252, 196, 25;
}:root {
  --flow-spacing: 1.1rem;
}h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}.prose > * + * {
    margin-top: var(--flow-spacing);
  }.prose li + li {
    margin-top: 0.5rem;
  }.prose li > p + p {
    margin-top: 0.5rem;
  }.prose li + li > p:first-child {
    margin-top: 1.25rem;
  }.prose h1 + *,
  .prose h2 + *,
  .prose h3 + *,
  .prose h4 + *,
  .prose h5 + *,
  .prose h6 + * {
    margin-top: 0.75em;
  }.prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    margin-top: clamp(2rem, 1.6em, 9999rem);
    line-height: 1.2;
    font-family: var(--font-body);
  }.prose h1 {
    margin-top: 0;
    font-size: calc(2rem * var(--heading-scale, 1));
  }.prose h2 {
    font-size: calc(1.5rem * var(--heading-scale, 1));
  }.prose header + h2 {
    margin-top: 0;
  }.prose h3 {
    font-size: calc(1.25rem * var(--heading-scale, 1));
  }.prose h4 {
    font-size: calc(1rem * var(--heading-scale, 1));
  }.prose h5 {
    font-size: calc(0.83rem * var(--heading-scale, 1));
  }.prose h6 {
    font-size: calc(0.75rem * var(--heading-scale, 1));
  }.prose .lead {
    font-size: 1.25rem;
    line-height: 1.3;
  }.prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.2em;
  }.prose .caption,
  .prose figure > * + figcaption {
    margin-top: 0.8em;
    font-size: 0.83em;
    line-height: 1.4;
  }.prose li > ul,
  .prose li > ol {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    padding-left: 0;
  }.prose code {
    font-size: 0.75em;
  }.prose table {
    width: 100%;
  }.prose thead {
    text-align: left;
  }.prose td,
  .prose th {
    text-align: left;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
    font-feature-settings: 'tnum';
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: calc(0.75rem - 1px);
  }.prose th:first-child,
  .prose td:first-child {
    padding-left: 0;
  }.prose th:last-child,
  .prose td:last-child {
    padding-right: 0;
  }.gap-0 {
    gap: 0px;
  }.m-0 {
    margin: 0px !important;
  }.mx-0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }.my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }.mt-0 {
    margin-top: 0px !important;
  }.mr-0 {
    margin-right: 0px !important;
  }.mb-0 {
    margin-bottom: 0px !important;
  }.ml-0 {
    margin-left: 0px !important;
  }.p-0 {
    padding: 0px !important;
  }.px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }.py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }.pt-0 {
    padding-top: 0px !important;
  }.pr-0 {
    padding-right: 0px !important;
  }.pb-0 {
    padding-bottom: 0px !important;
  }.pl-0 {
    padding-left: 0px !important;
  }.gap-1 {
    gap: 1px;
  }.m-1 {
    margin: 1px !important;
  }.mx-1 {
    margin-right: 1px !important;
    margin-left: 1px !important;
  }.my-1 {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }.mt-1 {
    margin-top: 1px !important;
  }.mr-1 {
    margin-right: 1px !important;
  }.mb-1 {
    margin-bottom: 1px !important;
  }.ml-1 {
    margin-left: 1px !important;
  }.p-1 {
    padding: 1px !important;
  }.px-1 {
    padding-right: 1px !important;
    padding-left: 1px !important;
  }.py-1 {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }.pt-1 {
    padding-top: 1px !important;
  }.pr-1 {
    padding-right: 1px !important;
  }.pb-1 {
    padding-bottom: 1px !important;
  }.pl-1 {
    padding-left: 1px !important;
  }.gap-2 {
    gap: 2px;
  }.m-2 {
    margin: 2px !important;
  }.mx-2 {
    margin-right: 2px !important;
    margin-left: 2px !important;
  }.my-2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }.mt-2 {
    margin-top: 2px !important;
  }.mr-2 {
    margin-right: 2px !important;
  }.mb-2 {
    margin-bottom: 2px !important;
  }.ml-2 {
    margin-left: 2px !important;
  }.p-2 {
    padding: 2px !important;
  }.px-2 {
    padding-right: 2px !important;
    padding-left: 2px !important;
  }.py-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }.pt-2 {
    padding-top: 2px !important;
  }.pr-2 {
    padding-right: 2px !important;
  }.pb-2 {
    padding-bottom: 2px !important;
  }.pl-2 {
    padding-left: 2px !important;
  }.gap-4 {
    gap: 4px;
  }.m-4 {
    margin: 4px !important;
  }.mx-4 {
    margin-right: 4px !important;
    margin-left: 4px !important;
  }.my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }.mt-4 {
    margin-top: 4px !important;
  }.mr-4 {
    margin-right: 4px !important;
  }.mb-4 {
    margin-bottom: 4px !important;
  }.ml-4 {
    margin-left: 4px !important;
  }.p-4 {
    padding: 4px !important;
  }.px-4 {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }.py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }.pt-4 {
    padding-top: 4px !important;
  }.pr-4 {
    padding-right: 4px !important;
  }.pb-4 {
    padding-bottom: 4px !important;
  }.pl-4 {
    padding-left: 4px !important;
  }.gap-8 {
    gap: 8px;
  }.m-8 {
    margin: 8px !important;
  }.mx-8 {
    margin-right: 8px !important;
    margin-left: 8px !important;
  }.my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }.mt-8 {
    margin-top: 8px !important;
  }.mr-8 {
    margin-right: 8px !important;
  }.mb-8 {
    margin-bottom: 8px !important;
  }.ml-8 {
    margin-left: 8px !important;
  }.p-8 {
    padding: 8px !important;
  }.px-8 {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }.pt-8 {
    padding-top: 8px !important;
  }.pr-8 {
    padding-right: 8px !important;
  }.pb-8 {
    padding-bottom: 8px !important;
  }.pl-8 {
    padding-left: 8px !important;
  }.gap-12 {
    gap: 12px;
  }.m-12 {
    margin: 12px !important;
  }.mx-12 {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }.my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }.mt-12 {
    margin-top: 12px !important;
  }.mr-12 {
    margin-right: 12px !important;
  }.mb-12 {
    margin-bottom: 12px !important;
  }.ml-12 {
    margin-left: 12px !important;
  }.p-12 {
    padding: 12px !important;
  }.px-12 {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }.py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }.pt-12 {
    padding-top: 12px !important;
  }.pr-12 {
    padding-right: 12px !important;
  }.pb-12 {
    padding-bottom: 12px !important;
  }.pl-12 {
    padding-left: 12px !important;
  }.gap-16 {
    gap: 16px;
  }.m-16 {
    margin: 16px !important;
  }.mx-16 {
    margin-right: 16px !important;
    margin-left: 16px !important;
  }.my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }.mt-16 {
    margin-top: 16px !important;
  }.mr-16 {
    margin-right: 16px !important;
  }.mb-16 {
    margin-bottom: 16px !important;
  }.ml-16 {
    margin-left: 16px !important;
  }.p-16 {
    padding: 16px !important;
  }.px-16 {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }.py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }.pt-16 {
    padding-top: 16px !important;
  }.pr-16 {
    padding-right: 16px !important;
  }.pb-16 {
    padding-bottom: 16px !important;
  }.pl-16 {
    padding-left: 16px !important;
  }.gap-20 {
    gap: 20px;
  }.m-20 {
    margin: 20px !important;
  }.mx-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }.my-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }.mt-20 {
    margin-top: 20px !important;
  }.mr-20 {
    margin-right: 20px !important;
  }.mb-20 {
    margin-bottom: 20px !important;
  }.ml-20 {
    margin-left: 20px !important;
  }.p-20 {
    padding: 20px !important;
  }.px-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }.py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }.pt-20 {
    padding-top: 20px !important;
  }.pr-20 {
    padding-right: 20px !important;
  }.pb-20 {
    padding-bottom: 20px !important;
  }.pl-20 {
    padding-left: 20px !important;
  }.gap-24 {
    gap: 24px;
  }.m-24 {
    margin: 24px !important;
  }.mx-24 {
    margin-right: 24px !important;
    margin-left: 24px !important;
  }.my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }.mt-24 {
    margin-top: 24px !important;
  }.mr-24 {
    margin-right: 24px !important;
  }.mb-24 {
    margin-bottom: 24px !important;
  }.ml-24 {
    margin-left: 24px !important;
  }.p-24 {
    padding: 24px !important;
  }.px-24 {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }.py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }.pt-24 {
    padding-top: 24px !important;
  }.pr-24 {
    padding-right: 24px !important;
  }.pb-24 {
    padding-bottom: 24px !important;
  }.pl-24 {
    padding-left: 24px !important;
  }.gap-32 {
    gap: 32px;
  }.m-32 {
    margin: 32px !important;
  }.mx-32 {
    margin-right: 32px !important;
    margin-left: 32px !important;
  }.my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }.mt-32 {
    margin-top: 32px !important;
  }.mr-32 {
    margin-right: 32px !important;
  }.mb-32 {
    margin-bottom: 32px !important;
  }.ml-32 {
    margin-left: 32px !important;
  }.p-32 {
    padding: 32px !important;
  }.px-32 {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }.py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }.pt-32 {
    padding-top: 32px !important;
  }.pr-32 {
    padding-right: 32px !important;
  }.pb-32 {
    padding-bottom: 32px !important;
  }.pl-32 {
    padding-left: 32px !important;
  }.gap-40 {
    gap: 40px;
  }.m-40 {
    margin: 40px !important;
  }.mx-40 {
    margin-right: 40px !important;
    margin-left: 40px !important;
  }.my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }.mt-40 {
    margin-top: 40px !important;
  }.mr-40 {
    margin-right: 40px !important;
  }.mb-40 {
    margin-bottom: 40px !important;
  }.ml-40 {
    margin-left: 40px !important;
  }.p-40 {
    padding: 40px !important;
  }.px-40 {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }.py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }.pt-40 {
    padding-top: 40px !important;
  }.pr-40 {
    padding-right: 40px !important;
  }.pb-40 {
    padding-bottom: 40px !important;
  }.pl-40 {
    padding-left: 40px !important;
  }.gap-48 {
    gap: 48px;
  }.m-48 {
    margin: 48px !important;
  }.mx-48 {
    margin-right: 48px !important;
    margin-left: 48px !important;
  }.my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }.mt-48 {
    margin-top: 48px !important;
  }.mr-48 {
    margin-right: 48px !important;
  }.mb-48 {
    margin-bottom: 48px !important;
  }.ml-48 {
    margin-left: 48px !important;
  }.p-48 {
    padding: 48px !important;
  }.px-48 {
    padding-right: 48px !important;
    padding-left: 48px !important;
  }.py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }.pt-48 {
    padding-top: 48px !important;
  }.pr-48 {
    padding-right: 48px !important;
  }.pb-48 {
    padding-bottom: 48px !important;
  }.pl-48 {
    padding-left: 48px !important;
  }.color-gray--0 {
    color: var(--color-gray--0);
  }.bg-gray--0 {
    background: var(--color-gray--0);
  }.color-gray--100 {
    color: var(--color-gray--100);
  }.bg-gray--100 {
    background: var(--color-gray--100);
  }.color-gray--200 {
    color: var(--color-gray--200);
  }.bg-gray--200 {
    background: var(--color-gray--200);
  }.color-gray--300 {
    color: var(--color-gray--300);
  }.bg-gray--300 {
    background: var(--color-gray--300);
  }.color-gray--400 {
    color: var(--color-gray--400);
  }.bg-gray--400 {
    background: var(--color-gray--400);
  }.color-gray--500 {
    color: var(--color-gray--500);
  }.bg-gray--500 {
    background: var(--color-gray--500);
  }.color-gray--600 {
    color: var(--color-gray--600);
  }.bg-gray--600 {
    background: var(--color-gray--600);
  }.color-gray--700 {
    color: var(--color-gray--700);
  }.bg-gray--700 {
    background: var(--color-gray--700);
  }.color-gray--800 {
    color: var(--color-gray--800);
  }.bg-gray--800 {
    background: var(--color-gray--800);
  }.color-gray--900 {
    color: var(--color-gray--900);
  }.bg-gray--900 {
    background: var(--color-gray--900);
  }.color-red {
    color: var(--color-red);
  }.bg-red {
    background: var(--color-red);
  }.color-yellow {
    color: var(--color-yellow);
  }.bg-yellow {
    background: var(--color-yellow);
  }.color-blue {
    color: var(--color-blue);
  }.bg-blue {
    background: var(--color-blue);
  }.color-green {
    color: var(--color-green);
  }.bg-green {
    background: var(--color-green);
  }.color-purple {
    color: var(--color-purple);
  }.bg-purple {
    background: var(--color-purple);
  }.color-caption {
    color: var(--color-caption);
  }.bg-caption {
    background: var(--color-caption);
  }.flow > * + * {
    margin-top: var(--flow-spacing);
  }.smaller {
  font-size: smaller;
}.tighter {
  line-height: 1.25;
}.larger {
  font-size: larger;
}.normal {
  font-weight: normal;
}.bold {
  font-weight: bold;
}.italic {
  font-style: italic;
}.sans {
  font-family: var(--font-body);
}.serif {
  font-family: var(--font-header) !important;
}.mono {
  font-family: var(--font-code);
}.hyphens {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}.color-section {
  color: var(--section-color);
}.badge {
  display: inline-block;
  vertical-align: top;
  font-size: 0.7rem !important;
  font-family: var(--font-body) !important;
  color: var(--color-body-background);
  background: var(--section-color);
  border-radius: 999px;
  padding: 3px 12px 4px;
  line-height: 1.2;
  font-weight: bold;
}.uppercase {
  text-transform: uppercase;
  letter-spacing: 1px;
}.inline {
  display: inline;
}.block {
  display: block;
}.inline-block {
  display: inline-block;
}.flex {
  display: flex;
}.flex-column {
  flex-direction: column;
}.align--flex-start {
  align-items: flex-start;
}.align--flex-end {
  align-items: flex-end;
}.align--center {
  align-items: center;
}.flex--no-shrink {
  flex-shrink: 0;
}.space-between {
  justify-content: space-between;
}.justify-center {
  justify-content: center;
}.dotted {
  position: relative;
}.dotted:before {
    content: '';
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--dot-color);
    margin-right: 6px;
    margin-left: -12px;
    transform: translateY(-2px);
  }.opacity-50 {
  opacity: 0.5;
}.mobile-breakout {
  max-width: none;
  width: calc(100% + (var(--layout-padding) * 2));
  margin-left: calc(var(--layout-padding) * -1);
  border-radius: 0;
}@media (min-width: 550px) {.mobile-breakout {
    max-width: 100%;
    width: 100%;
    margin-left: 0
}
  }.grid {
  --gap: 1rem;
  --item-min-size: 200px;
  display: grid;
  grid-gap: var(--gap);
}@supports (width: min(var(--min-width), 100%)) {.grid {
    grid-template-columns: repeat(
      auto-fit, 
      minmax(min(var(--item-min-size), 100%), 1fr)
    )
}
  }.horizontal-scroll {
   --gap: 1rem;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}.horizontal-scroll > * {
    flex: 0 0 auto;
  }.horizontal-scroll > * + * {
    margin-left: var(--gap);
  }.eyebrow {
  color: var(--color-caption);
  font-size: .9rem !important;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
}.multi-column {
  --columns: 1;
  --min-column-width: ;
  --gap: 0;

  -moz-columns: var(--columns) var(--min-column-width);

       columns: var(--columns) var(--min-column-width);
  -moz-column-gap: var(--gap);
       column-gap: var(--gap);
}.multi-column > * {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }a.button:hover {
    filter: brightness(0.9);
  }h2.marker {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr);
  gap: 12px;
  align-items: center;
  width: calc(100% + 16px);
  margin-right: -16px;
  font-size: 0.8rem;
}h2.marker span {
    text-transform: uppercase;
    color: var(--color-accent, var(--color-caption));
  }h2.marker:after {
    content: '';
    border-top: 2px dashed var(--color-border);
  }@media (min-width: 550px) {h2.marker {
    width: 100%;
    margin-right: 0
}
  }.line-clamp {
  --lines: 2;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--lines);
  -webkit-box-orient: vertical;
}.highlight {
  --size: 80px;
  --color: var(--color-yellow);
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.3;
  padding: 1em 0 0;
  position: relative;
}.highlight:before {
    content: "Highlight";
    display: block;
    font-family: var(--font-header);
    font-size: 1rem;
    font-style: italic;
    font-weight: normal;
    margin: 0 0 2px;
  }.highlight:after {
    content: "";
    position: absolute;
    top: 0.2em;
    left: calc(-1 * var(--size) / 3);
    z-index: -1;
    height: var(--size);
    width: var(--size);
    background: var(--color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.68 2.485a6 6 0 018.64 0l3.654 3.792a6 6 0 005.982 1.603l5.06-1.458a6 6 0 017.484 4.321l1.267 5.11a6 6 0 004.38 4.38l5.11 1.267a6 6 0 014.32 7.485l-1.457 5.06a6 6 0 001.603 5.98l3.792 3.654a6 6 0 010 8.642l-3.792 3.653a6 6 0 00-1.603 5.982l1.458 5.06a6 6 0 01-4.321 7.484l-5.11 1.267a6 6 0 00-4.38 4.38l-1.267 5.11a6 6 0 01-7.484 4.32l-5.06-1.457a6 6 0 00-5.982 1.603l-3.653 3.792a6 6 0 01-8.642 0l-3.653-3.792a6 6 0 00-5.982-1.603l-5.06 1.458a6 6 0 01-7.484-4.321l-1.267-5.11a6 6 0 00-4.38-4.38l-5.11-1.267a6 6 0 01-4.32-7.484l1.457-5.06a6 6 0 00-1.603-5.982l-3.792-3.653a6 6 0 010-8.642l3.792-3.653a6 6 0 001.603-5.982l-1.458-5.06a6 6 0 014.321-7.484l5.11-1.267a6 6 0 004.38-4.38l1.267-5.11a6 6 0 017.485-4.32l5.06 1.457a6 6 0 005.98-1.603l3.654-3.792z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.68 2.485a6 6 0 018.64 0l3.654 3.792a6 6 0 005.982 1.603l5.06-1.458a6 6 0 017.484 4.321l1.267 5.11a6 6 0 004.38 4.38l5.11 1.267a6 6 0 014.32 7.485l-1.457 5.06a6 6 0 001.603 5.98l3.792 3.654a6 6 0 010 8.642l-3.792 3.653a6 6 0 00-1.603 5.982l1.458 5.06a6 6 0 01-4.321 7.484l-5.11 1.267a6 6 0 00-4.38 4.38l-1.267 5.11a6 6 0 01-7.484 4.32l-5.06-1.457a6 6 0 00-5.982 1.603l-3.653 3.792a6 6 0 01-8.642 0l-3.653-3.792a6 6 0 00-5.982-1.603l-5.06 1.458a6 6 0 01-7.484-4.321l-1.267-5.11a6 6 0 00-4.38-4.38l-5.11-1.267a6 6 0 01-4.32-7.484l1.457-5.06a6 6 0 00-1.603-5.982l-3.792-3.653a6 6 0 010-8.642l3.792-3.653a6 6 0 001.603-5.982l-1.458-5.06a6 6 0 014.321-7.484l5.11-1.267a6 6 0 004.38-4.38l1.267-5.11a6 6 0 017.485-4.32l5.06 1.457a6 6 0 005.98-1.603l3.654-3.792z'/%3E%3C/svg%3E");
  }#wrapper {
  --layout-padding: 16px;
  --max-width: 752px;
}#wrapper > div > main {
    margin-top: 24px;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 16px var(--layout-padding) 40px;
  }#wrapper > div > header {
    margin-bottom: 0;
  }@media (min-width: 550px) {#wrapper {
    --layout-padding: 40px
}
  }#site-header {
  border-bottom: 1px solid var(--color-border);
  position: relative;
  display: flex;
  align-items: center;
}#site-header .wrapper {
  max-width: var(--max-width);
  flex-grow: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--layout-padding);
}article h2:first-child {
    margin-top: 0;
  }article img {
    max-width: none;
    width: calc(100% + var(--layout-padding) * 2);
    margin-left: calc(var(--layout-padding) * -1);
  }@media (min-width: 700px) {
    article img {
      max-width: 100%;
      width: 100%;
      margin-left: 0;
    }
  }article twitter-widget {
    margin-bottom: 1.5em !important;
  }article pre {
    position: relative;
    padding-left: 42px;
    padding-right: 12px;
  }article pre:before {
      content: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 199 200';
      width: 34px;
      position: absolute;
      top: 12px;
      left: 0px;
      bottom: 12px;
      color: var(--color-gray--500);
      opacity: 0.5;
      white-space: pre-line;
      overflow: hidden;
      text-align: right;
      font-family: var(--font-code);
      font-size: 0.75em;
      line-height: var(--root-line-height);
      padding-right: 12px;
    }hr {
  background: var(--color-border);
  height: 4px;
  border: none;
}hr.dashed {
    background: none;
    border-top: 1px dashed var(--color-gray--200);
    height: 1px;
  }hr.break {
    background: none;
    height: auto;
    padding: 0.5em 0;
  }hr.break:before {
      content: "・゜✧.・";
      color: var(--color-blue);
      display: block;
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 1.5em;
    }hr.break:nth-of-type(2n):before, hr.break:nth-of-type(7n):before {
      color: var(--color-green);
    }hr.break:nth-of-type(3n):before {
      color: var(--color-red);
    }hr.break:nth-of-type(4n):before {
      color: var(--color-purple);
    }pre {
  border-radius: 0;
  width: calc(100% + 32px);
  margin-left: -16px;
  overflow: auto;
  background: var(--color-gray--0) !important;
}@media (min-width: 550px) {pre {
    width: auto;
    margin: 0;
    
    border-radius: 8px
}
  }pre code {
    padding: 12px 8px;
    border: none;
    display: block;
    background-color: transparent;
  }code {
  font-feature-settings: normal;
  font-family: var(--font-code);
  background-color: var(--color-gray--0);
  border: 0.5px solid var(--color-border);
  padding: 0.2em 0.3em;
  vertical-align: middle;
  word-wrap: normal;
  overflow: auto;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}.image-caption {
  color: var(--color-caption);
  max-width: 550px;
}twitter-widget {
  width: 100% !important;
  max-width: 100% !important;
}twitter-widget::shadow .EmbeddedTweet {
  width: 100% !important;
  max-width: 100% !important;
}.prose > * + .twitter-tweet {
  margin-top: var(--flow-spacing) !important;
}.twitter-tweet {
  margin-bottom: 0 !important;
}.twitter-tweet + * {
  margin-top: 1.5em;
}#site-header nav a {
    display: inline-block;
    position: relative;
    border-bottom: 3px solid transparent; 
    padding: 16px 0 6px;
    margin-bottom: -1px;
  }#site-header nav a:hover {
    color: var(--highlight-color);
  }#site-header nav a:hover:after {
      transform: scaleX(1);
    }#site-header nav a.selected {
    color: var(--highlight-color);
    font-weight: bold;
    border-bottom: 3px solid var(--highlight-color);
  }#site-header nav ul {
    width: calc(100% + (var(--layout-padding) * 2));
    margin-left: calc(var(--layout-padding) * -1);
    padding: 0 var(--layout-padding) 0;
  }@media (min-width: 700px) {#site-header nav ul {
      width: auto;
      margin: 0;
      padding: 0
  }
    }#site-header nav li {
    display: inline-block;
    font-size: 0.75em;
  }#site-header nav li + li {
    margin-left: 20px;
    margin-top: 0;
  }:focus:not(:focus-visible) {
  outline: none;
}html {
  overflow-y: scroll;
  line-height: var(--root-line-height);
}body {
  font-family: var(--font-body);
  overflow: hidden;
  min-height: 100vh;
  background: var(--color-body-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-header);
}h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    --link-color: var(--color-header);
  }a {
  --link-underline-color: rgba(var(--section-color-rgb), 0.4);
  color: var(--link-color);
  text-decoration: underline;
  transition: all 0.25s;
  text-decoration-thickness: var(--text-decoration-thickness, 2px);
  -webkit-text-decoration-color: var(--link-underline-color);
          text-decoration-color: var(--link-underline-color);
  text-underline-offset: var(--text-decoration-offset, 0.125rem);
}a:hover {
    color: var(--section-color, var(--link-hover));
  }a .unstyled {
    text-decoration: none;
  }a .underlined {
    text-decoration: underline;
  }a.unstyled {
  text-decoration: none;
}a.underlined {
  text-decoration: underline;
}a.no-hover:hover {
  color: unset;
}iframe {
  border-radius: 8px;
}@media (min-width: 700px) {iframe {
    border-radius: 0
}
  }code a {
  border: none;
  box-shadow: none;
  text-decoration: underline;
}blockquote {
  position: relative;
  margin-left: 0.5em;
  padding: 4px 0.5em 4px 1.2em;
  font-size: 0.95em;
}blockquote:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    background: var(--section-color);
    border-radius: 3px;
    height: 100%;
  }mark {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
  border-radius: .5em .3em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  margin: 0 -0.4em;
  padding: .15em .4em;
}ul {
  padding: 0;
  list-style-type: none;
}ul > li {
    margin-left: 1em;
  }ul > li:before {
    content: "–";
    margin-left: -1em;
    margin-top: -1px;
    float: left;
  }ul.inline {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}ul.inline li {
    display: inline-block;
    margin-bottom: 0;
  }ul.inline li:first-child {
    margin-left: 0;
  }ul.inline li:before {
    display: none;
  }ul.unstyled {
  margin: 0;
  padding: 0;
}ul.unstyled li {
    margin: 0;
  }ul.unstyled li:before {
    display: none;
  }ol {
  padding: 0;
  list-style: none;
  --offset: 1.5em;
}ol > li {
    margin-left: var(--offset);
    counter-increment: ol-counter;
    position: relative;
  }ol > li:before {
    content: counter(ol-counter) ". ";
    font-feature-settings: "tnum";
    padding-right: 0.5em;
    position: absolute;
    left: calc(-1 * var(--offset));
  }.toc h2 {
    font-size: 0.9rem;
  }.toc > div {
    margin-top: 8px; 
  }.toc > div > ul {
    list-style-type: none;
    margin: 8px 0 8px 4px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--color-border);
    font-size: 0.75em;
  }.toc ul ul {
    margin: 4px 0 0 12px;
  }.toc ul ul ul {
    display: none;
  }.toc li {
    margin: 0;
  }.toc li:before {
    display: none;
  }.toc li + li {
    margin-top: 4px;
  }.toc a {
    text-decoration: none;
  }.toc a.selected {
    color: var(--section-color);
  }.bookmark {
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--color-border); 
  color: inherit;
  border-radius: 8px;
  --section-color: var(--color-text);
}.bookmark:hover {
    background: var(--color-gray--100);
  }.bookmark img, .bookmark .image {
    width: 120px;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }.bookmark-loader {
  display: block;
  width: 100%;
  height: 120px;
  background: var(--color-gray--100);
  border-radius: 8px;
}.callout aside p:last-child {
    margin: 0;
  }