.trilia-design-shell {
    width: min(100%, var(--trilia-content-wide));
    margin-inline: auto;
}

.trilia-design-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--trilia-space-xxl);
    align-items: start;
    margin-bottom: var(--trilia-space-huge);
    padding: var(--trilia-space-xxxl);
    border: 1px solid var(--trilia-color-outline-variant);
    border-radius: var(--trilia-radius-panel);
    background:
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--trilia-color-secondary) 24%, transparent), transparent 30%),
        linear-gradient(135deg, var(--trilia-color-surface), var(--trilia-color-surface-low));
}

.trilia-design-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--trilia-space-sm);
    margin-bottom: var(--trilia-space-md);
    color: var(--trilia-color-primary);
    font-size: var(--trilia-font-size-label);
    font-weight: var(--trilia-font-weight-heavy);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trilia-design-hero__eyebrow::before {
    width: 28px;
    height: 4px;
    border-radius: var(--trilia-radius-pill);
    background: var(--trilia-color-secondary);
    content: "";
}

.trilia-design-hero__summary {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--trilia-color-text-muted);
    font-size: 1.08rem;
}

.trilia-design-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--trilia-space-sm);
}

.trilia-design-section {
    margin-block: var(--trilia-space-huge);
}

.trilia-design-section__header {
    display: flex;
    justify-content: space-between;
    gap: var(--trilia-space-xl);
    align-items: end;
    margin-bottom: var(--trilia-space-xl);
}

.trilia-design-section__description {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--trilia-color-text-muted);
}

.trilia-grid {
    display: grid;
    gap: var(--trilia-space-lg);
}

.trilia-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trilia-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trilia-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trilia-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.trilia-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--trilia-space-md);
    align-items: center;
}

.trilia-stack > * + * {
    margin-top: var(--trilia-space-lg);
}

.trilia-preview-panel {
    padding: var(--trilia-space-xxl);
    border: 1px solid var(--trilia-color-outline-variant);
    border-radius: var(--trilia-radius-extra-large);
    background: var(--trilia-color-surface-low);
}

.trilia-preview-panel--canvas {
    background:
        linear-gradient(45deg, var(--trilia-color-surface-high) 25%, transparent 25%),
        linear-gradient(-45deg, var(--trilia-color-surface-high) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--trilia-color-surface-high) 75%),
        linear-gradient(-45deg, transparent 75%, var(--trilia-color-surface-high) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

@media (max-width: 1100px) {
    .trilia-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trilia-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .trilia-design-hero {
        grid-template-columns: 1fr;
        padding: var(--trilia-space-xl);
    }

    .trilia-design-toolbar {
        justify-content: flex-start;
    }

    .trilia-design-section__header {
        display: block;
    }

    .trilia-grid--2,
    .trilia-grid--3,
    .trilia-grid--4 {
        grid-template-columns: 1fr;
    }

    .trilia-preview-panel {
        padding: var(--trilia-space-lg);
    }
}