@node-core/ui-components 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325 → 1.0.1-e1f87bde264af01e260a8efa4fab1749a2c6bc29

package/styles/index.css

@@ -1,31 +1,989 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @charset "utf-8";
-
-/* IDE Support
- * We recommend Stylelint and Tailwind Extensions for better IDE support.
- * @see https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
- * @see https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
-*/
-
-@import 'tailwindcss';
-@import './theme.css';
-@import './animations.css';
-@import './effects.css';
-@import './base.css' layer(utilities);
-@import './markdown.css' layer(utilities);
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-green-100: #edf2eb;
+    --color-green-200: #c5e5b4;
+    --color-green-300: #99cc7d;
+    --color-green-400: #84ba64;
+    --color-green-600: #417e38;
+    --color-green-700: #2c682c;
+    --color-green-800: #2c682c;
+    --color-green-900: #1a3f1d;
+    --color-gray-200: oklch(0.928 0.006 264.531);
+    --color-neutral-100: #f6f7f9;
+    --color-neutral-200: #e9edf0;
+    --color-neutral-300: #d9e1e4;
+    --color-neutral-400: #cbd4d9;
+    --color-neutral-600: #929fa5;
+    --color-neutral-700: #6e7b83;
+    --color-neutral-800: #556066;
+    --color-neutral-900: #2c3437;
+    --color-neutral-950: #0d121c;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: 1.33333;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: 1.42857;
+    --text-base: 1rem;
+    --text-base--line-height: 1.5;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: 1.55556;
+    --text-xl: 1.25rem;
+    --text-xl--line-height: 1.4;
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: 1.33333;
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: 1.2;
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: 1.11111;
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --radius-xs: 0.125rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-danger-100: #fbf1f0;
+    --color-danger-200: #fad3d4;
+    --color-danger-300: #fab6b7;
+    --color-danger-400: #fa8e8e;
+    --color-danger-600: #de1a1b;
+    --color-danger-700: #b80c0c;
+    --color-danger-800: #900e0e;
+    --color-danger-900: #661514;
+    --color-warning-100: #fdf3e7;
+    --color-warning-200: #fad9b0;
+    --color-warning-300: #f5bc75;
+    --color-warning-400: #e99c40;
+    --color-warning-600: #ae5f00;
+    --color-warning-700: #8b4d04;
+    --color-warning-800: #683d08;
+    --color-warning-900: #4d2f0b;
+    --color-info-100: #e9f4fa;
+    --color-info-200: #bce6fc;
+    --color-info-300: #8ed4f8;
+    --color-info-400: #52baed;
+    --color-info-600: #0c7bb3;
+    --color-info-700: #066291;
+    --color-info-800: #074d71;
+    --color-info-900: #0a3953;
+    --color-accent1-100: #f7f1fb;
+    --color-accent1-200: #ead9fb;
+    --color-accent1-300: #dbbdf9;
+    --color-accent1-400: #c79bf2;
+    --color-accent1-600: #9756d6;
+    --color-accent1-700: #7d3cbe;
+    --color-accent1-800: #642b9e;
+    --color-accent1-900: #361b52;
+    --color-accent2-100: #fbf0f4;
+    --color-accent2-200: #fbd4e6;
+    --color-accent2-300: #fbb4d2;
+    --color-accent2-400: #f68bb7;
+    --color-accent2-600: #d6246e;
+    --color-accent2-700: #b01356;
+    --color-accent2-800: #8b1245;
+    --color-accent2-900: #411526;
+    --color-pulse-100: #0000330f;
+    --color-pulse-200: #00002d17;
+    --color-pulse-300: #ddeaf814;
+    --color-pulse-400: #d3edf81d;
+    --color-shadow: #101828;
+    --font-open-sans: var(--font-open-sans);
+    --font-ibm-plex-mono: var(--font-ibm-plex-mono);
+    --font-weight-regular: 400;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentColor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .relative {
+    position: relative;
+  }
+  .right-0 {
+    right: calc(var(--spacing)*0);
+  }
+  .container {
+    width: 100%;
+    @media (width >= 670px) {
+      max-width: 670px;
+    }
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mx-1\.5 {
+    margin-inline: calc(var(--spacing)*1.5);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing)*4);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing)*2);
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .table {
+    display: table;
+  }
+  .size-3 {
+    width: calc(var(--spacing)*3);
+    height: calc(var(--spacing)*3);
+  }
+  .size-4 {
+    width: calc(var(--spacing)*4);
+    height: calc(var(--spacing)*4);
+  }
+  .size-32 {
+    width: calc(var(--spacing)*32);
+    height: calc(var(--spacing)*32);
+  }
+  .h-4 {
+    height: calc(var(--spacing)*4);
+  }
+  .h-20 {
+    height: calc(var(--spacing)*20);
+  }
+  .h-72 {
+    height: calc(var(--spacing)*72);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-4 {
+    width: calc(var(--spacing)*4);
+  }
+  .w-20 {
+    width: calc(var(--spacing)*20);
+  }
+  .w-72 {
+    width: calc(var(--spacing)*72);
+  }
+  .w-\[150px\] {
+    width: 150px;
+  }
+  .w-\[305px\] {
+    width: 305px;
+  }
+  .w-\[600px\] {
+    width: 600px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing)*1);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing)*3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing)*4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing)*6);
+  }
+  .bg-accent1-100 {
+    background-color: var(--color-accent1-100);
+  }
+  .bg-accent1-200 {
+    background-color: var(--color-accent1-200);
+  }
+  .bg-accent1-300 {
+    background-color: var(--color-accent1-300);
+  }
+  .bg-accent1-400 {
+    background-color: var(--color-accent1-400);
+  }
+  .bg-accent1-600 {
+    background-color: var(--color-accent1-600);
+  }
+  .bg-accent1-700 {
+    background-color: var(--color-accent1-700);
+  }
+  .bg-accent1-800 {
+    background-color: var(--color-accent1-800);
+  }
+  .bg-accent1-900 {
+    background-color: var(--color-accent1-900);
+  }
+  .bg-accent2-100 {
+    background-color: var(--color-accent2-100);
+  }
+  .bg-accent2-200 {
+    background-color: var(--color-accent2-200);
+  }
+  .bg-accent2-300 {
+    background-color: var(--color-accent2-300);
+  }
+  .bg-accent2-400 {
+    background-color: var(--color-accent2-400);
+  }
+  .bg-accent2-600 {
+    background-color: var(--color-accent2-600);
+  }
+  .bg-accent2-700 {
+    background-color: var(--color-accent2-700);
+  }
+  .bg-accent2-800 {
+    background-color: var(--color-accent2-800);
+  }
+  .bg-accent2-900 {
+    background-color: var(--color-accent2-900);
+  }
+  .bg-danger-100 {
+    background-color: var(--color-danger-100);
+  }
+  .bg-danger-200 {
+    background-color: var(--color-danger-200);
+  }
+  .bg-danger-300 {
+    background-color: var(--color-danger-300);
+  }
+  .bg-danger-400 {
+    background-color: var(--color-danger-400);
+  }
+  .bg-danger-600 {
+    background-color: var(--color-danger-600);
+  }
+  .bg-danger-700 {
+    background-color: var(--color-danger-700);
+  }
+  .bg-danger-800 {
+    background-color: var(--color-danger-800);
+  }
+  .bg-danger-900 {
+    background-color: var(--color-danger-900);
+  }
+  .bg-green-100 {
+    background-color: var(--color-green-100);
+  }
+  .bg-green-200 {
+    background-color: var(--color-green-200);
+  }
+  .bg-green-300 {
+    background-color: var(--color-green-300);
+  }
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+  .bg-green-700 {
+    background-color: var(--color-green-700);
+  }
+  .bg-green-800 {
+    background-color: var(--color-green-800);
+  }
+  .bg-green-900 {
+    background-color: var(--color-green-900);
+  }
+  .bg-info-100 {
+    background-color: var(--color-info-100);
+  }
+  .bg-info-200 {
+    background-color: var(--color-info-200);
+  }
+  .bg-info-300 {
+    background-color: var(--color-info-300);
+  }
+  .bg-info-400 {
+    background-color: var(--color-info-400);
+  }
+  .bg-info-600 {
+    background-color: var(--color-info-600);
+  }
+  .bg-info-700 {
+    background-color: var(--color-info-700);
+  }
+  .bg-info-800 {
+    background-color: var(--color-info-800);
+  }
+  .bg-info-900 {
+    background-color: var(--color-info-900);
+  }
+  .bg-neutral-100 {
+    background-color: var(--color-neutral-100);
+  }
+  .bg-neutral-200 {
+    background-color: var(--color-neutral-200);
+  }
+  .bg-neutral-300 {
+    background-color: var(--color-neutral-300);
+  }
+  .bg-neutral-400 {
+    background-color: var(--color-neutral-400);
+  }
+  .bg-neutral-600 {
+    background-color: var(--color-neutral-600);
+  }
+  .bg-neutral-700 {
+    background-color: var(--color-neutral-700);
+  }
+  .bg-neutral-800 {
+    background-color: var(--color-neutral-800);
+  }
+  .bg-neutral-900 {
+    background-color: var(--color-neutral-900);
+  }
+  .bg-warning-100 {
+    background-color: var(--color-warning-100);
+  }
+  .bg-warning-200 {
+    background-color: var(--color-warning-200);
+  }
+  .bg-warning-300 {
+    background-color: var(--color-warning-300);
+  }
+  .bg-warning-400 {
+    background-color: var(--color-warning-400);
+  }
+  .bg-warning-600 {
+    background-color: var(--color-warning-600);
+  }
+  .bg-warning-700 {
+    background-color: var(--color-warning-700);
+  }
+  .bg-warning-800 {
+    background-color: var(--color-warning-800);
+  }
+  .bg-warning-900 {
+    background-color: var(--color-warning-900);
+  }
+  .fill-\[\#333333\] {
+    fill: #333333;
+  }
+  .fill-neutral-700 {
+    fill: var(--color-neutral-700);
+  }
+  .p-3 {
+    padding: calc(var(--spacing)*3);
+  }
+  .p-4 {
+    padding: calc(var(--spacing)*4);
+  }
+  .p-6 {
+    padding: calc(var(--spacing)*6);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing)*2);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing)*4);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
+  .text-7xl {
+    font-size: var(--text-7xl);
+    line-height: var(--tw-leading, var(--text-7xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-regular {
+    --tw-font-weight: var(--font-weight-regular);
+    font-weight: var(--font-weight-regular);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .opacity-70 {
+    opacity: 70%;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .group-open\:rotate-180 {
+    &:is(:where(.group):is([open], :popover-open, :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .peer-checked\:flex {
+    &:is(:where(.peer):checked ~ *) {
+      display: flex;
+    }
+  }
+  .motion-safe\:transition-transform {
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .dark\:block {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: block;
+    }
+  }
+  .dark\:hidden {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: none;
+    }
+  }
+  .dark\:fill-neutral-100 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      fill: var(--color-neutral-100);
+    }
+  }
+  .dark\:fill-white {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      fill: var(--color-white);
+    }
+  }
+}
+h1.special {
+  background-image: linear-gradient( 180deg, var(--color-neutral-900) 0%, color-mix(in srgb, #2c3437 80%, transparent) 100% );
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: linear-gradient( 180deg, var(--color-neutral-900) 0%, color-mix(in oklab, var(--color-neutral-900) 80%, transparent) 100% );
+  }
+  background-clip: text;
+  font-size: var(--text-4xl);
+  line-height: var(--tw-leading, var(--text-4xl--line-height));
+  --tw-leading: 3rem;
+  line-height: 3rem;
+  --tw-tracking: -0.045rem;
+  letter-spacing: -0.045rem;
+  -webkit-text-fill-color: transparent;
+  @media (width >= 48rem) {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  @media (width >= 48rem) {
+    --tw-leading: 4rem;
+    line-height: 4rem;
+  }
+  @media (width >= 48rem) {
+    --tw-tracking: -0.06rem;
+    letter-spacing: -0.06rem;
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-image: linear-gradient( 180deg, var(--color-white) 0%, color-mix(in srgb, #fff 80%, transparent) 100% );
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient( 180deg, var(--color-white) 0%, color-mix(in oklab, var(--color-white) 80%, transparent) 100% );
+    }
+  }
+}
+@layer utilities {
+  * {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+  html, body {
+    height: 100%;
+  }
+  body {
+    background-color: var(--color-white);
+    font-family: var(--font-open-sans);
+    color: var(--color-neutral-950);
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-950);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white);
+    }
+  }
+}
+@layer utilities {
+  main {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: calc(var(--spacing)*6);
+    hr {
+      width: 100%;
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+      border-top-color: var(--color-neutral-200);
+      background-color: var(--color-white);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        border-top-color: var(--color-neutral-900);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-950);
+      }
+    }
+    h1 {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+    h2 {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+    h3 {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+    h4 {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+    h5, h6 {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+    h1, h2, h3, h4, h5, h6 {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-neutral-900);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white);
+      }
+      &[id] a {
+        color: var(--color-neutral-900);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-white);
+        }
+      }
+    }
+    strong {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+    code {
+      border-radius: var(--radius-xs);
+      background-color: var(--color-neutral-100);
+      padding-inline: calc(var(--spacing)*1);
+      font-family: var(--font-ibm-plex-mono);
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-neutral-900);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white);
+      }
+    }
+    p {
+      color: var(--color-neutral-900);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white);
+      }
+    }
+    a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a), .anchor {
+      color: var(--color-green-600);
+      @media (width < 670px) {
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-400);
+      }
+      &:hover {
+        color: var(--color-green-900);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-green-300);
+        }
+      }
+      &[role='button'] {
+        @media (width < 670px) {
+          --tw-font-weight: var(--font-weight-regular);
+          font-weight: var(--font-weight-regular);
+        }
+      }
+      &:has(code) {
+        @media (width < 670px) {
+          text-decoration-color: var(--color-neutral-800);
+        }
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          @media (width < 670px) {
+            text-decoration-color: var(--color-neutral-200);
+          }
+        }
+        code {
+          color: inherit;
+          color: inherit;
+        }
+      }
+    }
+    ul {
+      list-style-type: disc;
+      padding-right: calc(var(--spacing)*5);
+      padding-left: calc(var(--spacing)*9);
+      --tw-leading: calc(var(--spacing)*6);
+      line-height: calc(var(--spacing)*6);
+      color: var(--color-neutral-900);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white);
+      }
+      li div:has(> pre) {
+        margin-block: calc(var(--spacing)*1) !important;
+      }
+    }
+    ol {
+      list-style-type: decimal;
+      padding-inline: calc(var(--spacing)*5);
+      --tw-leading: calc(var(--spacing)*6);
+      line-height: calc(var(--spacing)*6);
+      color: var(--color-neutral-900);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white);
+      }
+      li div:has(> pre) {
+        margin-block: calc(var(--spacing)*1) !important;
+      }
+    }
+    table {
+      margin-bottom: calc(var(--spacing)*1);
+      width: 100%;
+      border-collapse: separate;
+      --tw-border-spacing-x: calc(var(--spacing)*0);
+      --tw-border-spacing-y: calc(var(--spacing)*0);
+      border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+      border-radius: var(--radius-xs);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-neutral-200);
+      text-align: left;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        border-color: var(--color-neutral-800);
+      }
+      th, td {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0px;
+        border-right-style: var(--tw-border-style);
+        border-right-width: 0px;
+        border-color: var(--color-neutral-200);
+        padding-inline: calc(var(--spacing)*4);
+        padding-block: calc(var(--spacing)*2);
+        color: var(--color-neutral-900);
+        @media (width < 670px) {
+          display: block;
+        }
+        @media (width < 670px) {
+          border-left-style: var(--tw-border-style);
+          border-left-width: 0px;
+        }
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          border-color: var(--color-neutral-800);
+        }
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-white);
+        }
+        > a {
+          padding-right: calc(var(--spacing)*2);
+        }
+      }
+      th {
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+      }
+      tr:last-child > td {
+        @media (width >= 40rem) {
+          border-bottom-style: var(--tw-border-style);
+          border-bottom-width: 0px;
+        }
+        &:last-child {
+          @media (width < 670px) {
+            border-bottom-style: var(--tw-border-style);
+            border-bottom-width: 0px;
+          }
+        }
+      }
+      td:first-child, th:first-child {
+        @media (width >= 40rem) {
+          border-left-style: var(--tw-border-style);
+          border-left-width: 0px;
+        }
+      }
+    }
+  }
+}
 @layer base {
   :root {
-    --header-height: calc(var(--spacing, 0.25rem) * 16);
+    --header-height: calc(var(--spacing, 0.25rem)*16);
   }
-
   *,
   ::after,
   ::before,
@@ -33,6 +991,146 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentColor);
   }
+  button,
+  [role='button'] {
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-leading: initial;
+      --tw-tracking: initial;
+      --tw-border-style: solid;
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
+    }
+  }
 }
-
-@custom-variant aria-current (&[aria-current="page"]);