@layer forte.tokens {
  :root {
    --forte-color-text-primary: #1a1a1a;
    --forte-color-text-secondary: #4a4a4a;
    --forte-color-text-muted: #767676;
    --forte-color-text-link: #06c;
    --forte-color-surface-page: #fff;
    --forte-color-surface-raised: #f5f5f5;
    --forte-color-border-subtle: #e0e0e0;
    --forte-color-accent-info: #06c;
    --forte-color-accent-warning: #b45309;
    --forte-color-accent-danger: #dc2626;
    --forte-color-accent-tip: #16a34a;
    --forte-color-accent-important: #7c3aed;
    --forte-color-surface-inverse: #1a1a1a;
    --forte-color-code-surface: #1e1e2e;
    --forte-color-code-text: #cdd6f4;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --forte-color-text-primary: #e8e8e8;
      --forte-color-text-secondary: #a8a8a8;
      --forte-color-text-muted: #767676;
      --forte-color-text-link: #4d9fff;
      --forte-color-surface-page: #111;
      --forte-color-surface-raised: #1e1e1e;
      --forte-color-border-subtle: #2e2e2e;
      --forte-color-accent-info: #4d9fff;
      --forte-color-accent-warning: #f59e0b;
      --forte-color-accent-danger: #f87171;
      --forte-color-accent-tip: #4ade80;
      --forte-color-accent-important: #a78bfa;
      --forte-color-surface-inverse: #e8e8e8;
      --forte-color-code-surface: #1e1e2e;
      --forte-color-code-text: #cdd6f4;
    }
  }

  [data-theme="dark"] {
    --forte-color-text-primary: #e8e8e8;
    --forte-color-text-secondary: #a8a8a8;
    --forte-color-text-muted: #767676;
    --forte-color-text-link: #4d9fff;
    --forte-color-surface-page: #111;
    --forte-color-surface-raised: #1e1e1e;
    --forte-color-border-subtle: #2e2e2e;
    --forte-color-accent-info: #4d9fff;
    --forte-color-accent-warning: #f59e0b;
    --forte-color-accent-danger: #f87171;
    --forte-color-accent-tip: #4ade80;
    --forte-color-accent-important: #a78bfa;
    --forte-color-surface-inverse: #e8e8e8;
    --forte-color-code-surface: #1e1e2e;
    --forte-color-code-text: #cdd6f4;
  }

  [data-theme="light"] {
    --forte-color-text-primary: #1a1a1a;
    --forte-color-text-secondary: #4a4a4a;
    --forte-color-text-muted: #767676;
    --forte-color-text-link: #06c;
    --forte-color-surface-page: #fff;
    --forte-color-surface-raised: #f5f5f5;
    --forte-color-border-subtle: #e0e0e0;
    --forte-color-accent-info: #06c;
    --forte-color-accent-warning: #b45309;
    --forte-color-accent-danger: #dc2626;
    --forte-color-accent-tip: #16a34a;
    --forte-color-accent-important: #7c3aed;
    --forte-color-surface-inverse: #1a1a1a;
    --forte-color-code-surface: #1e1e2e;
    --forte-color-code-text: #cdd6f4;
  }

  :root {
    --forte-measure: 65ch;
    --forte-scale-ratio: 1.25;
    --forte-type-min: 1rem;
    --forte-type-max: 1.25rem;
    --forte-viewport-min: 20rem;
    --forte-viewport-max: 90rem;
    --forte-leading-prose: 1.6;
    --forte-leading-heading: 1.15;
    --forte-leading-code: 1.45;
    --forte-leading-caption: 1.35;
    --forte-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, Oxygen, Ubuntu, sans-serif;
    --forte-font-mono: ui-monospace, "Cascadia Code", "Source Code Pro",
                     Menlo, Consolas, "DejaVu Sans Mono", monospace;
    --forte-step--1: clamp(.8rem, calc(.8rem + .2rem * ((100vw - 20rem) / 70rem)), 1rem);
    --forte-step-0: clamp(1rem, calc(1rem + .25rem * ((100vw - 20rem) / 70rem)), 1.25rem);
    --forte-step-1: clamp(1.25rem, calc(1.25rem + .3125rem * ((100vw - 20rem) / 70rem)), 1.5625rem);
    --forte-step-2: clamp(1.5625rem, calc(1.5625rem + .390625rem * ((100vw - 20rem) / 70rem)), 1.95313rem);
    --forte-step-3: clamp(1.95313rem, calc(1.95313rem + .488281rem * ((100vw - 20rem) / 70rem)), 2.44141rem);
    --forte-step-4: clamp(2.44141rem, calc(2.44141rem + .610352rem * ((100vw - 20rem) / 70rem)), 3.05176rem);
    --forte-step-5: clamp(3.05176rem, calc(3.05176rem + .762939rem * ((100vw - 20rem) / 70rem)), 3.8147rem);
    --forte-space-unit: .25rem;
    --forte-heading-space-ratio: 1.75;
    --forte-space-1: .25rem;
    --forte-space-2: .5rem;
    --forte-space-3: .75rem;
    --forte-space-4: 1rem;
    --forte-space-6: 1.5rem;
    --forte-space-8: 2rem;
    --forte-space-12: 3rem;
    --forte-space-16: 4rem;
    --forte-motion-hover: .12s;
    --forte-motion-copy: .1s;
    --forte-motion-base: .3s;
    --forte-motion-enter: .3s;
    --forte-motion-easing: ease-out;
  }
}

@layer forte.elements {
  :where(.forte) {
    color: var(--forte-color-text-primary);
    background-color: var(--forte-color-surface-page);
    font-size: var(--forte-step-0);
    line-height: var(--forte-leading-prose);
    font-family: var(--forte-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(.forte) :is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--forte-leading-heading);
    color: var(--forte-color-text-primary);
    max-width: var(--forte-measure);
    margin-top: calc(var(--forte-space-unit) * 8 * var(--forte-heading-space-ratio));
    margin-bottom: calc(var(--forte-space-unit) * 8);
    font-weight: 700;
  }

  :where(.forte) h1 {
    font-size: var(--forte-step-4);
  }

  :where(.forte) h2 {
    font-size: var(--forte-step-3);
  }

  :where(.forte) h3 {
    font-size: var(--forte-step-2);
  }

  :where(.forte) h4 {
    font-size: var(--forte-step-1);
  }

  :where(.forte) h5 {
    font-size: var(--forte-step-0);
  }

  :where(.forte) h6 {
    font-size: var(--forte-step-0);
    color: var(--forte-color-text-secondary);
  }

  :where(.forte) :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
  }

  :where(.forte) p {
    max-width: var(--forte-measure);
    margin-top: 0;
    margin-bottom: var(--forte-space-4);
    color: var(--forte-color-text-primary);
  }

  :where(.forte) p:last-child {
    margin-bottom: 0;
  }

  :where(.forte) :is(ul, ol) {
    max-width: var(--forte-measure);
    margin-top: 0;
    margin-bottom: var(--forte-space-4);
    padding-left: var(--forte-space-6);
  }

  :where(.forte) :is(ul, ol):last-child {
    margin-bottom: 0;
  }

  :where(.forte) li {
    margin-top: var(--forte-space-1);
    margin-bottom: var(--forte-space-1);
    color: var(--forte-color-text-primary);
  }

  :where(.forte) li > p {
    margin-bottom: var(--forte-space-3);
  }

  :where(.forte) li > p:last-child {
    margin-bottom: 0;
  }

  :where(.forte) :is(ul, ol) :is(ul, ol) {
    margin-top: var(--forte-space-1);
    margin-bottom: var(--forte-space-1);
  }

  :where(.forte) ul {
    list-style-type: disc;
  }

  :where(.forte) ul ul {
    list-style-type: circle;
  }

  :where(.forte) ul ul ul {
    list-style-type: square;
  }

  :where(.forte) ol {
    list-style-type: decimal;
  }

  :where(.forte) blockquote {
    max-width: var(--forte-measure);
    margin: var(--forte-space-6) 0;
    padding: var(--forte-space-3) var(--forte-space-6);
    border-left: 3px solid var(--forte-color-border-subtle);
    color: var(--forte-color-text-secondary);
    font-style: italic;
  }

  :where(.forte) blockquote > p {
    max-width: none;
    margin-bottom: var(--forte-space-2);
  }

  :where(.forte) blockquote > p:last-child {
    margin-bottom: 0;
  }

  :where(.forte) blockquote cite {
    margin-top: var(--forte-space-2);
    font-size: var(--forte-step--1);
    color: var(--forte-color-text-muted);
    font-style: normal;
    display: block;
  }

  :where(.forte) a {
    color: var(--forte-color-text-link);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--forte-color-text-link) 40%, transparent);
    text-underline-offset: .15em;
  }

  :where(.forte) a:visited {
    color: var(--forte-color-text-secondary);
  }

  :where(.forte) strong {
    color: inherit;
    font-weight: 700;
  }

  :where(.forte) em {
    color: inherit;
    font-style: italic;
  }

  :where(.forte) del {
    color: var(--forte-color-text-muted);
    text-decoration: line-through;
  }

  :where(.forte) mark {
    background-color: color-mix(in srgb, var(--forte-color-accent-warning) 20%, transparent);
    color: inherit;
    border-radius: .15em;
    padding: .05em .15em;
  }

  :where(.forte) abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
  }

  :where(.forte) sub, :where(.forte) sup {
    vertical-align: baseline;
    font-size: .75em;
    line-height: 0;
    position: relative;
  }

  :where(.forte) sup {
    top: -.5em;
  }

  :where(.forte) sub {
    bottom: -.25em;
  }

  :where(.forte) hr {
    border: none;
    border-top: 1px solid var(--forte-color-border-subtle);
    margin: var(--forte-space-8) 0;
    max-width: var(--forte-measure);
  }

  :where(.forte) img {
    max-width: min(100%, var(--forte-measure));
    border-radius: .25rem;
    height: auto;
    display: block;
  }

  :where(.forte) figure {
    max-width: var(--forte-measure);
    margin: var(--forte-space-6) 0;
  }

  :where(.forte) figure img {
    max-width: 100%;
  }

  :where(.forte) figcaption {
    margin-top: var(--forte-space-2);
    font-size: var(--forte-step--1);
    line-height: var(--forte-leading-caption);
    color: var(--forte-color-text-muted);
    font-style: italic;
  }

  :where(.forte) [id^="footnote"], :where(.forte) .footnotes {
    font-size: var(--forte-step--1);
    color: var(--forte-color-text-secondary);
    border-top: 1px solid var(--forte-color-border-subtle);
    margin-top: var(--forte-space-12);
    padding-top: var(--forte-space-4);
  }

  :where(.forte) sup a[href^="#"], :where(.forte) a[href^="#fnref"] {
    color: var(--forte-color-text-link);
    font-weight: 700;
    text-decoration: none;
  }

  :where(.forte) dl {
    max-width: var(--forte-measure);
    margin-bottom: var(--forte-space-4);
  }

  :where(.forte) dt {
    color: var(--forte-color-text-primary);
    margin-top: var(--forte-space-3);
    font-weight: 700;
  }

  :where(.forte) dd {
    margin-left: var(--forte-space-6);
    color: var(--forte-color-text-secondary);
    margin-bottom: var(--forte-space-1);
  }

  :where(.forte) :not(pre) > code {
    background-color: var(--forte-color-surface-raised);
    color: var(--forte-color-text-primary);
    font-family: var(--forte-font-mono);
    border-radius: .25em;
    padding: .1em .3em;
    font-size: .875em;
  }

  :where(.forte) pre {
    background-color: var(--forte-color-code-surface);
    max-width: 100%;
    margin: var(--forte-space-6) 0;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow-x: auto;
  }

  :where(.forte) pre code {
    font-family: var(--forte-font-mono);
    font-size: .875em;
    line-height: var(--forte-leading-code);
    white-space: pre;
    background-color: #0000;
    border-radius: 0;
    padding: 0;
  }

  :where(.forte) pre::-webkit-scrollbar {
    height: 6px;
  }

  :where(.forte) pre::-webkit-scrollbar-track {
    background: none;
  }

  :where(.forte) pre::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--forte-color-code-text) 30%, transparent);
    border-radius: 3px;
  }

  :where(.forte) .forte-copy-button {
    background-color: color-mix(in srgb, var(--forte-color-code-text) 12%, transparent);
    color: var(--forte-color-code-text);
    border: 1px solid color-mix(in srgb, var(--forte-color-code-text) 20%, transparent);
    font-family: var(--forte-font-mono);
    cursor: pointer;
    opacity: 0;
    border-radius: .25rem;
    padding: .25rem .5rem;
    font-size: .7em;
    position: absolute;
    top: .75rem;
    right: .75rem;
  }

  :where(.forte) pre:hover .forte-copy-button, :where(.forte) pre:focus-within .forte-copy-button {
    opacity: 1;
  }

  :where(.forte) .forte-copy-button[data-copied] {
    background-color: color-mix(in srgb, var(--forte-color-accent-tip) 20%, transparent);
    color: var(--forte-color-accent-tip);
    border-color: color-mix(in srgb, var(--forte-color-accent-tip) 30%, transparent);
  }

  :where(.forte) .shiki span {
    color: var(--shiki-light);
  }

  @media (prefers-color-scheme: dark) {
    :where(.forte) .shiki span {
      color: var(--shiki-dark);
    }
  }

  [data-theme="dark"] :where(.forte) .shiki span {
    color: var(--shiki-dark);
  }

  :where(.forte) .forte-callout {
    color: var(--forte-color-text-primary);
    padding: var(--forte-space-3) var(--forte-space-6);
    margin: var(--forte-space-6) 0;
    border-left-style: solid;
    border-left-width: 4px;
    border-radius: 0 .375rem .375rem 0;
    font-style: normal;
  }

  :where(.forte) .forte-callout__title {
    margin-bottom: var(--forte-space-1);
    font-weight: 700;
    font-size: var(--forte-step-0);
    display: block;
  }

  :where(.forte) .forte-callout__icon {
    display: none;
  }

  :where(.forte) .forte-callout__body {
    font-size: var(--forte-step-0);
  }

  :where(.forte) .forte-callout__body > p {
    max-width: none;
    font-size: var(--forte-step-0);
    margin-bottom: var(--forte-space-2);
  }

  :where(.forte) .forte-callout__body > p:last-child {
    margin-bottom: 0;
  }

  :where(.forte) .forte-callout--note {
    border-color: var(--forte-color-accent-info);
    background-color: color-mix(in srgb, var(--forte-color-accent-info) 8%, transparent);
  }

  :where(.forte) .forte-callout--warning {
    border-color: var(--forte-color-accent-warning);
    background-color: color-mix(in srgb, var(--forte-color-accent-warning) 8%, transparent);
  }

  :where(.forte) .forte-callout--danger {
    border-color: var(--forte-color-accent-danger);
    background-color: color-mix(in srgb, var(--forte-color-accent-danger) 8%, transparent);
  }

  :where(.forte) .forte-callout--tip {
    border-color: var(--forte-color-accent-tip);
    background-color: color-mix(in srgb, var(--forte-color-accent-tip) 8%, transparent);
  }

  :where(.forte) .forte-callout--important {
    border-color: var(--forte-color-accent-important);
    background-color: color-mix(in srgb, var(--forte-color-accent-important) 8%, transparent);
  }

  :where(.forte) .forte-callout--pullquote {
    border-color: var(--forte-color-border-subtle);
    background-color: #0000;
    font-style: italic;
  }

  :where(.forte) blockquote[data-callout], :where(.forte) blockquote:where(:has( > p:first-child > strong:first-child)) {
    color: var(--forte-color-text-primary);
    padding: var(--forte-space-3) var(--forte-space-6);
    margin: var(--forte-space-6) 0;
    border-left-style: solid;
    border-left-width: 4px;
    border-radius: 0 .375rem .375rem 0;
    font-style: normal;
  }

  :where(.forte) blockquote[data-callout] > p:first-child, :where(.forte) blockquote:where(:has( > p:first-child > strong:first-child)) > p:first-child {
    margin-bottom: var(--forte-space-1);
    font-weight: 700;
    font-size: var(--forte-step-0);
  }

  :where(.forte) blockquote[data-callout] > p, :where(.forte) blockquote:where(:has( > p:first-child > strong:first-child)) > p {
    max-width: none;
    font-size: var(--forte-step-0);
    margin-bottom: var(--forte-space-2);
  }

  :where(.forte) blockquote[data-callout] > p:last-child, :where(.forte) blockquote:where(:has( > p:first-child > strong:first-child)) > p:last-child {
    margin-bottom: 0;
  }

  :where(.forte) blockquote[data-callout="note"], :where(.forte) blockquote[data-callout="info"] {
    border-color: var(--forte-color-accent-info);
    background-color: color-mix(in srgb, var(--forte-color-accent-info) 8%, transparent);
  }

  :where(.forte) blockquote[data-callout="warning"], :where(.forte) blockquote[data-callout="caution"] {
    border-color: var(--forte-color-accent-warning);
    background-color: color-mix(in srgb, var(--forte-color-accent-warning) 8%, transparent);
  }

  :where(.forte) blockquote[data-callout="danger"] {
    border-color: var(--forte-color-accent-danger);
    background-color: color-mix(in srgb, var(--forte-color-accent-danger) 8%, transparent);
  }

  :where(.forte) blockquote[data-callout="tip"] {
    border-color: var(--forte-color-accent-tip);
    background-color: color-mix(in srgb, var(--forte-color-accent-tip) 8%, transparent);
  }

  :where(.forte) blockquote:where(:has( > p:first-child > strong:first-child)) {
    border-color: var(--forte-color-accent-info);
    background-color: color-mix(in srgb, var(--forte-color-accent-info) 8%, transparent);
  }

  :where(.forte) .forte-table-wrapper {
    margin: var(--forte-space-6) 0;
    border: 1px solid var(--forte-color-border-subtle);
    border-radius: .375rem;
    overflow-x: auto;
  }

  :where(.forte) table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    font-size: var(--forte-step-0);
    margin: var(--forte-space-6) 0;
    border: 1px solid var(--forte-color-border-subtle);
    border-radius: .375rem;
    display: block;
    overflow-x: auto;
  }

  :where(.forte) .forte-table-wrapper table {
    border: none;
    margin: 0;
  }

  :where(.forte) thead {
    background-color: var(--forte-color-surface-raised);
  }

  :where(.forte) th {
    text-align: left;
    padding: var(--forte-space-2) var(--forte-space-3);
    border-bottom: 2px solid var(--forte-color-border-subtle);
    color: var(--forte-color-text-primary);
    white-space: nowrap;
    font-weight: 700;
  }

  :where(.forte) td {
    padding: var(--forte-space-2) var(--forte-space-3);
    border-bottom: 1px solid var(--forte-color-border-subtle);
    color: var(--forte-color-text-primary);
    vertical-align: top;
  }

  :where(.forte) tbody tr:last-child td {
    border-bottom: none;
  }

  :where(.forte) tbody tr:nth-child(2n) {
    background-color: color-mix(in srgb, var(--forte-color-surface-raised) 50%, transparent);
  }

  :where(.forte) td:where([data-type="number"]), :where(.forte) td:where(:has( > span[data-numeric])) {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  :where(.forte) a:hover {
    color: var(--forte-color-text-primary);
    text-decoration-color: var(--forte-color-text-primary);
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(.forte) a {
      transition: color var(--forte-motion-hover) var(--forte-motion-easing),
      text-decoration-color var(--forte-motion-hover) var(--forte-motion-easing);
    }

    :where(.forte) .forte-copy-button {
      transition: opacity var(--forte-motion-copy) var(--forte-motion-easing),
      background-color var(--forte-motion-copy) var(--forte-motion-easing),
      color var(--forte-motion-copy) var(--forte-motion-easing),
      border-color var(--forte-motion-copy) var(--forte-motion-easing);
    }

    [data-forte-motion="enter"] :where(.forte) > *, :where(.forte)[data-forte-motion="enter"] > * {
      animation: forte-enter var(--forte-motion-enter) var(--forte-motion-easing) both;
    }

    [data-forte-motion="enter"] :where(.forte) > :first-child, :where(.forte)[data-forte-motion="enter"] > :first-child {
      animation-delay: 0s;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(2), :where(.forte)[data-forte-motion="enter"] > :nth-child(2) {
      animation-delay: 50ms;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(3), :where(.forte)[data-forte-motion="enter"] > :nth-child(3) {
      animation-delay: .1s;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(4), :where(.forte)[data-forte-motion="enter"] > :nth-child(4) {
      animation-delay: .15s;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(5), :where(.forte)[data-forte-motion="enter"] > :nth-child(5) {
      animation-delay: .2s;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(6), :where(.forte)[data-forte-motion="enter"] > :nth-child(6) {
      animation-delay: .25s;
    }

    [data-forte-motion="enter"] :where(.forte) > :nth-child(n+7), :where(.forte)[data-forte-motion="enter"] > :nth-child(n+7) {
      animation-delay: .3s;
    }

    @keyframes forte-enter {
      from {
        opacity: 0;
        translate: 0 .375rem;
      }

      to {
        opacity: 1;
        translate: 0;
      }
    }
  }

  :where(.forte) .forte-committed {
    display: contents;
  }

  :where(.forte) .forte-forming {
    opacity: .55;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    color: inherit;
    display: block;
  }

  :where(.forte) .forte-forming:not(:empty):after {
    content: "▋";
    opacity: 1;
    vertical-align: baseline;
    margin-left: 1px;
    animation: 1s step-end infinite forte-cursor-blink;
    display: inline-block;
  }

  @keyframes forte-cursor-blink {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.forte) .forte-forming:not(:empty):after {
      opacity: .6;
      animation: none;
    }
  }

  :where(.forte) .forte-committed > * {
    animation: .15s ease-out both forte-block-commit;
  }

  @keyframes forte-block-commit {
    from {
      opacity: .55;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.forte) .forte-committed > * {
      animation: none;
    }
  }
}

@layer forte.components;

@layer forte.utilities {
  .forte-none {
    font-size: revert;
    line-height: revert;
    max-width: revert;
  }

  .forte-none :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, pre, code, table, figure, figcaption, hr, a, strong, em, del) {
    all: revert;
  }

  .forte-none .forte-action__button {
    all: revert-layer;
  }

  .forte-none.forte-section__body > :is(p, h1, h2, h3, h4) {
    margin: 0;
  }

  .forte-none.forte-section__body > :is(p, ul, ol) {
    max-width: var(--forte-measure, 62ch);
  }

  .forte-none .forte :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, pre, code, table, figure, figcaption, hr, a, strong, em, del) {
    all: revert-layer;
  }
}