.am-guide-card {
    height: 100%;
}

.am-guide-entry {
    margin-top: var(--am-space-6);
    padding-top: var(--am-space-5);
    border-top: 1px solid var(--am-color-border);
}

.am-guide-demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-3);
    margin: var(--am-space-3) 0;
    padding: var(--am-space-4);
    background-color: var(--am-color-surface);
    border: 1px solid var(--am-color-border);
    border-radius: var(--am-radius-md);
}

.am-guide-facts dt {
    margin-top: var(--am-space-3);
    font-weight: var(--am-font-weight-semibold);
}

.am-guide-facts dd {
    margin: 0;
}

.am-bg-background {
    background-color: var(--am-color-background);
}

.am-bg-surface {
    background-color: var(--am-color-surface);
}

.am-bg-surface-muted {
    background-color: var(--am-color-surface-muted);
}

.am-bg-border {
    background-color: var(--am-color-border);
}

.am-bg-control-border {
    background-color: var(--am-color-control-border);
}

.am-bg-card-border {
    background-color: var(--am-color-card-border);
}

.am-bg-card-divider {
    background-color: var(--am-color-card-divider);
}

.am-bg-role-1-soft {
    background-color: var(--am-color-role-1-soft);
}

.am-bg-role-1-strong {
    background-color: var(--am-color-role-1-strong);
}

.am-bg-role-2-soft {
    background-color: var(--am-color-role-2-soft);
}

.am-bg-role-2-strong {
    background-color: var(--am-color-role-2-strong);
}

.am-bg-role-3-soft {
    background-color: var(--am-color-role-3-soft);
}

.am-bg-role-3-strong {
    background-color: var(--am-color-role-3-strong);
}

.am-bg-role-4-soft {
    background-color: var(--am-color-role-4-soft);
}

.am-bg-role-4-strong {
    background-color: var(--am-color-role-4-strong);
}

.am-bg-role-5-soft {
    background-color: var(--am-color-role-5-soft);
}

.am-bg-role-5-strong {
    background-color: var(--am-color-role-5-strong);
}

.am-bg-role-6-soft {
    background-color: var(--am-color-role-6-soft);
}

.am-bg-role-6-strong {
    background-color: var(--am-color-role-6-strong);
}

.am-bg-table-line {
    background-color: var(--am-color-table-line);
}

.am-bg-table-hover {
    background-color: var(--am-color-table-hover);
}

.am-bg-table-header {
    background-color: var(--am-color-table-header);
}

.am-bg-text {
    background-color: var(--am-color-text);
}

.am-bg-text-muted {
    background-color: var(--am-color-text-muted);
}

.am-bg-focus-ring {
    background-color: var(--am-color-focus-ring);
}

.am-bg-scrim {
    background-color: var(--am-color-scrim);
}

.am-bg-primary {
    background-color: var(--am-color-primary);
}

.am-bg-primary-contrast {
    background-color: var(--am-color-primary-contrast);
}

.am-bg-primary-soft {
    background-color: var(--am-color-primary-soft);
}

.am-bg-primary-strong {
    background-color: var(--am-color-primary-strong);
}

.am-bg-info {
    background-color: var(--am-color-info);
}

.am-bg-info-contrast {
    background-color: var(--am-color-info-contrast);
}

.am-bg-info-soft {
    background-color: var(--am-color-info-soft);
}

.am-bg-info-strong {
    background-color: var(--am-color-info-strong);
}

.am-bg-success {
    background-color: var(--am-color-success);
}

.am-bg-success-contrast {
    background-color: var(--am-color-success-contrast);
}

.am-bg-success-soft {
    background-color: var(--am-color-success-soft);
}

.am-bg-success-strong {
    background-color: var(--am-color-success-strong);
}

.am-bg-warning {
    background-color: var(--am-color-warning);
}

.am-bg-warning-contrast {
    background-color: var(--am-color-warning-contrast);
}

.am-bg-warning-soft {
    background-color: var(--am-color-warning-soft);
}

.am-bg-warning-strong {
    background-color: var(--am-color-warning-strong);
}

.am-bg-danger {
    background-color: var(--am-color-danger);
}

.am-bg-danger-contrast {
    background-color: var(--am-color-danger-contrast);
}

.am-bg-danger-soft {
    background-color: var(--am-color-danger-soft);
}

.am-bg-danger-strong {
    background-color: var(--am-color-danger-strong);
}

.am-bg-chart-1 {
    background-color: var(--am-color-chart-1);
}

.am-bg-chart-2 {
    background-color: var(--am-color-chart-2);
}

.am-bg-chart-3 {
    background-color: var(--am-color-chart-3);
}

.am-bg-chart-4 {
    background-color: var(--am-color-chart-4);
}

.am-bg-chart-5 {
    background-color: var(--am-color-chart-5);
}

.am-bg-chart-6 {
    background-color: var(--am-color-chart-6);
}

.am-bg-code-attribute {
    background-color: var(--am-color-code-attribute);
}

.am-bg-code-comment {
    background-color: var(--am-color-code-comment);
}

.am-bg-code-keyword {
    background-color: var(--am-color-code-keyword);
}

.am-bg-code-meta {
    background-color: var(--am-color-code-meta);
}

.am-bg-code-number {
    background-color: var(--am-color-code-number);
}

.am-bg-code-string {
    background-color: var(--am-color-code-string);
}

.am-bg-code-title {
    background-color: var(--am-color-code-title);
}

.am-bg-code-type {
    background-color: var(--am-color-code-type);
}

.am-bg-diff-delete-highlight {
    background-color: var(--am-color-diff-delete-highlight);
}

.am-bg-diff-insert-highlight {
    background-color: var(--am-color-diff-insert-highlight);
}

.am-bg-entry-ask-soft {
    background-color: var(--am-color-entry-ask-soft);
}

.am-bg-entry-ask-strong {
    background-color: var(--am-color-entry-ask-strong);
}

.am-bg-entry-assumption-soft {
    background-color: var(--am-color-entry-assumption-soft);
}

.am-bg-entry-assumption-strong {
    background-color: var(--am-color-entry-assumption-strong);
}

.am-bg-entry-consultation-soft {
    background-color: var(--am-color-entry-consultation-soft);
}

.am-bg-entry-consultation-strong {
    background-color: var(--am-color-entry-consultation-strong);
}

.am-bg-entry-decision-soft {
    background-color: var(--am-color-entry-decision-soft);
}

.am-bg-entry-decision-strong {
    background-color: var(--am-color-entry-decision-strong);
}

.am-bg-entry-feedback-soft {
    background-color: var(--am-color-entry-feedback-soft);
}

.am-bg-entry-feedback-strong {
    background-color: var(--am-color-entry-feedback-strong);
}

.am-bg-entry-finding-soft {
    background-color: var(--am-color-entry-finding-soft);
}

.am-bg-entry-finding-strong {
    background-color: var(--am-color-entry-finding-strong);
}

.am-bg-entry-note-soft {
    background-color: var(--am-color-entry-note-soft);
}

.am-bg-entry-note-strong {
    background-color: var(--am-color-entry-note-strong);
}

.am-bg-entry-question-soft {
    background-color: var(--am-color-entry-question-soft);
}

.am-bg-entry-question-strong {
    background-color: var(--am-color-entry-question-strong);
}

.am-bg-type-epic-soft {
    background-color: var(--am-color-type-epic-soft);
}

.am-bg-type-epic-strong {
    background-color: var(--am-color-type-epic-strong);
}

.am-bg-type-feature-soft {
    background-color: var(--am-color-type-feature-soft);
}

.am-bg-type-feature-strong {
    background-color: var(--am-color-type-feature-strong);
}

.am-bg-type-task-soft {
    background-color: var(--am-color-type-task-soft);
}

.am-bg-type-task-strong {
    background-color: var(--am-color-type-task-strong);
}

.am-fg-background {
    color: var(--am-color-background);
}

.am-fg-surface {
    color: var(--am-color-surface);
}

.am-fg-surface-muted {
    color: var(--am-color-surface-muted);
}

.am-fg-border {
    color: var(--am-color-border);
}

.am-fg-control-border {
    color: var(--am-color-control-border);
}

.am-fg-text {
    color: var(--am-color-text);
}

.am-fg-card-border {
    color: var(--am-color-card-border);
}

.am-fg-card-divider {
    color: var(--am-color-card-divider);
}

.am-fg-role-1-soft {
    color: var(--am-color-role-1-soft);
}

.am-fg-role-1-strong {
    color: var(--am-color-role-1-strong);
}

.am-fg-role-2-soft {
    color: var(--am-color-role-2-soft);
}

.am-fg-role-2-strong {
    color: var(--am-color-role-2-strong);
}

.am-fg-role-3-soft {
    color: var(--am-color-role-3-soft);
}

.am-fg-role-3-strong {
    color: var(--am-color-role-3-strong);
}

.am-fg-role-4-soft {
    color: var(--am-color-role-4-soft);
}

.am-fg-role-4-strong {
    color: var(--am-color-role-4-strong);
}

.am-fg-role-5-soft {
    color: var(--am-color-role-5-soft);
}

.am-fg-role-5-strong {
    color: var(--am-color-role-5-strong);
}

.am-fg-role-6-soft {
    color: var(--am-color-role-6-soft);
}

.am-fg-role-6-strong {
    color: var(--am-color-role-6-strong);
}

.am-fg-table-line {
    color: var(--am-color-table-line);
}

.am-fg-table-hover {
    color: var(--am-color-table-hover);
}

.am-fg-table-header {
    color: var(--am-color-table-header);
}

.am-fg-text-muted {
    color: var(--am-color-text-muted);
}

.am-fg-focus-ring {
    color: var(--am-color-focus-ring);
}

.am-fg-scrim {
    color: var(--am-color-scrim);
}

.am-fg-primary {
    color: var(--am-color-primary);
}

.am-fg-primary-contrast {
    color: var(--am-color-primary-contrast);
}

.am-fg-primary-soft {
    color: var(--am-color-primary-soft);
}

.am-fg-primary-strong {
    color: var(--am-color-primary-strong);
}

.am-fg-info {
    color: var(--am-color-info);
}

.am-fg-info-contrast {
    color: var(--am-color-info-contrast);
}

.am-fg-info-soft {
    color: var(--am-color-info-soft);
}

.am-fg-info-strong {
    color: var(--am-color-info-strong);
}

.am-fg-success {
    color: var(--am-color-success);
}

.am-fg-success-contrast {
    color: var(--am-color-success-contrast);
}

.am-fg-success-soft {
    color: var(--am-color-success-soft);
}

.am-fg-success-strong {
    color: var(--am-color-success-strong);
}

.am-fg-warning {
    color: var(--am-color-warning);
}

.am-fg-warning-contrast {
    color: var(--am-color-warning-contrast);
}

.am-fg-warning-soft {
    color: var(--am-color-warning-soft);
}

.am-fg-warning-strong {
    color: var(--am-color-warning-strong);
}

.am-fg-danger {
    color: var(--am-color-danger);
}

.am-fg-danger-contrast {
    color: var(--am-color-danger-contrast);
}

.am-fg-danger-soft {
    color: var(--am-color-danger-soft);
}

.am-fg-danger-strong {
    color: var(--am-color-danger-strong);
}

.am-sample-space-1 {
    width: var(--am-space-1);
}

.am-sample-space-2 {
    width: var(--am-space-2);
}

.am-sample-space-3 {
    width: var(--am-space-3);
}

.am-sample-space-4 {
    width: var(--am-space-4);
}

.am-sample-space-5 {
    width: var(--am-space-5);
}

.am-sample-space-6 {
    width: var(--am-space-6);
}

.am-sample-space-7 {
    width: var(--am-space-7);
}

.am-sample-space-8 {
    width: var(--am-space-8);
}

.am-sample-radius-sm {
    border-radius: var(--am-radius-sm);
}

.am-sample-radius-md {
    border-radius: var(--am-radius-md);
}

.am-sample-radius-lg {
    border-radius: var(--am-radius-lg);
}

.am-sample-radius-full {
    border-radius: var(--am-radius-full);
}

.am-sample-shadow-md {
    box-shadow: var(--am-shadow-md);
}

.am-sample-shadow-lg {
    box-shadow: var(--am-shadow-lg);
}

.am-sample-font-family-sans {
    font-family: var(--am-font-family-sans);
}

.am-sample-font-family-mono {
    font-family: var(--am-font-family-mono);
}

.am-sample-font-size-page-title {
    font-size: var(--am-font-size-page-title);
}

.am-sample-font-size-section-title {
    font-size: var(--am-font-size-section-title);
}

.am-sample-font-size-card-title {
    font-size: var(--am-font-size-card-title);
}

.am-sample-font-size-body {
    font-size: var(--am-font-size-body);
}

.am-sample-font-size-interface {
    font-size: var(--am-font-size-interface);
}

.am-sample-font-size-meta {
    font-size: var(--am-font-size-meta);
}

.am-sample-font-weight-regular {
    font-weight: var(--am-font-weight-regular);
}

.am-sample-font-weight-medium {
    font-weight: var(--am-font-weight-medium);
}

.am-sample-font-weight-semibold {
    font-weight: var(--am-font-weight-semibold);
}

.am-sample-line-height-tight {
    line-height: var(--am-line-height-tight);
}

.am-sample-line-height-normal {
    line-height: var(--am-line-height-normal);
}

.am-sample-line-height-reading {
    line-height: var(--am-line-height-reading);
}

.am-sample-motion-duration-fast {
    transition-duration: var(--am-motion-duration-fast);
}

.am-sample-motion-duration-base {
    transition-duration: var(--am-motion-duration-base);
}

.am-sample-motion-duration-slow {
    transition-duration: var(--am-motion-duration-slow);
}

.am-sample-motion-easing {
    transition-timing-function: var(--am-motion-easing);
}

.am-sample-breakpoint-sm {
    width: var(--am-breakpoint-sm);
    max-width: 100%;
}

.am-sample-breakpoint-md {
    width: var(--am-breakpoint-md);
    max-width: 100%;
}

.am-sample-breakpoint-lg {
    width: var(--am-breakpoint-lg);
    max-width: 100%;
}

.am-sample-breakpoint-xl {
    width: var(--am-breakpoint-xl);
    max-width: 100%;
}

.am-sample-size-icon {
    width: var(--am-size-icon);
    max-width: 100%;
}

.am-sample-size-accent-border {
    width: var(--am-size-accent-border);
    max-width: 100%;
}

.am-sample-size-control-fine {
    width: var(--am-size-control-fine);
    max-width: 100%;
}

.am-sample-size-control-coarse {
    width: var(--am-size-control-coarse);
    max-width: 100%;
}

.am-sample-size-table-row {
    width: var(--am-size-table-row);
    max-width: 100%;
}

.am-sample-size-table-row-compact {
    width: var(--am-size-table-row-compact);
    max-width: 100%;
}

.am-sample-size-target-min {
    width: var(--am-size-target-min);
    max-width: 100%;
}

.am-sample-size-reading {
    width: var(--am-size-reading);
    max-width: 100%;
}

.am-sample-size-focus-ring {
    width: var(--am-size-focus-ring);
    max-width: 100%;
}

.am-sample-size-sidebar {
    width: var(--am-size-sidebar);
    max-width: 100%;
}

.am-sample-size-header {
    width: var(--am-size-header);
    max-width: 100%;
}

.am-sample-size-side-column {
    width: var(--am-size-side-column);
    max-width: 100%;
}

.am-sample-size-chart {
    width: var(--am-size-chart);
    max-width: 100%;
}

.am-table-scroll {
    overflow-x: auto;
}

.am-swatch {
    width: var(--am-size-control-coarse);
    height: var(--am-space-5);
    border: 1px solid var(--am-color-border);
    border-radius: var(--am-radius-sm);
}

.am-contrast-sample {
    display: inline-block;
    padding: var(--am-space-1) var(--am-space-3);
    border: 1px solid var(--am-color-border);
    border-radius: var(--am-radius-sm);
    font-weight: var(--am-font-weight-semibold);
}

.am-sample-bar {
    height: var(--am-space-3);
    background-color: var(--am-color-primary);
    border-radius: var(--am-radius-sm);
}

.am-sample-box {
    width: var(--am-size-control-coarse);
    height: var(--am-size-control-coarse);
    background-color: var(--am-color-surface);
    border: 1px solid var(--am-color-border);
}

.am-sample-paragraph {
    max-width: 24rem;
    margin: 0;
}

.am-motion-demo {
    width: 100%;
    max-width: 12rem;
    padding: var(--am-space-1);
    border: 1px solid var(--am-color-border);
    border-radius: var(--am-radius-sm);
}

.am-sample-motion-box {
    width: var(--am-space-5);
    height: var(--am-space-5);
    background-color: var(--am-color-primary);
    border-radius: var(--am-radius-sm);
    transition-property: transform;
}

.am-motion-demo:hover .am-sample-motion-box,
.am-motion-demo:focus .am-sample-motion-box {
    transform: translateX(8rem);
}

.am-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--am-space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.am-icon-grid li {
    display: flex;
    align-items: center;
    gap: var(--am-space-2);
}