.trilia-design-system,
.trilia-design-system * {
    box-sizing: border-box;
}

.trilia-design-system {
    min-height: calc(100vh - 64px);
    margin: 20px 20px 0 0;
    padding: var(--trilia-space-xxxl);
    border-radius: var(--trilia-radius-panel) var(--trilia-radius-panel) 0 0;
    background: var(--trilia-color-background);
    color: var(--trilia-color-text);
    font-family: var(--trilia-font-family);
    font-size: var(--trilia-font-size-body);
    line-height: var(--trilia-line-height-body);
    transition:
        background-color var(--trilia-duration-normal) var(--trilia-easing-standard),
        color var(--trilia-duration-normal) var(--trilia-easing-standard);
}

.trilia-design-system h1,
.trilia-design-system h2,
.trilia-design-system h3,
.trilia-design-system h4,
.trilia-design-system p {
    margin-top: 0;
}

.trilia-design-system h1,
.trilia-design-system h2,
.trilia-design-system h3,
.trilia-design-system h4 {
    color: var(--trilia-color-text);
    line-height: var(--trilia-line-height-title);
}

.trilia-design-system h1 {
    margin-bottom: var(--trilia-space-md);
    font-size: var(--trilia-font-size-display);
    font-weight: var(--trilia-font-weight-heavy);
    letter-spacing: -0.035em;
}

.trilia-design-system h2 {
    margin-bottom: var(--trilia-space-sm);
    font-size: var(--trilia-font-size-headline);
    font-weight: var(--trilia-font-weight-heavy);
    letter-spacing: -0.02em;
}

.trilia-design-system h3 {
    margin-bottom: var(--trilia-space-sm);
    font-size: var(--trilia-font-size-title);
    font-weight: var(--trilia-font-weight-bold);
}

.trilia-design-system h4 {
    margin-bottom: var(--trilia-space-xs);
    font-size: var(--trilia-font-size-title-small);
    font-weight: var(--trilia-font-weight-bold);
}

.trilia-design-system p {
    margin-bottom: var(--trilia-space-lg);
}

.trilia-design-system a {
    color: var(--trilia-color-primary);
    font-weight: var(--trilia-font-weight-bold);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.trilia-design-system a:hover {
    text-decoration-thickness: 0.14em;
}

.trilia-design-system :focus-visible {
    outline: none;
    box-shadow: var(--trilia-focus-ring);
}

.trilia-design-system code,
.trilia-design-system kbd,
.trilia-design-system pre {
    font-family: var(--trilia-font-mono);
}

.trilia-design-system code {
    padding: 0.12em 0.4em;
    border: 1px solid var(--trilia-color-outline-variant);
    border-radius: var(--trilia-radius-tiny);
    background: var(--trilia-color-surface-low);
    color: var(--trilia-color-text);
}

.trilia-design-system hr {
    height: 1px;
    margin: var(--trilia-space-xxl) 0;
    border: 0;
    background: var(--trilia-color-outline-variant);
}

.trilia-design-system ::selection {
    background: color-mix(in srgb, var(--trilia-color-primary) 28%, transparent);
}

@media (max-width: 782px) {
    .trilia-design-system {
        margin: 10px 10px 0 0;
        padding: var(--trilia-space-lg);
        border-radius: var(--trilia-radius-large) var(--trilia-radius-large) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trilia-design-system,
    .trilia-design-system * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}