body {
    display: flex;
    flex-direction: column;
}

.layout-container,
.layout-container.u-flex.u-flex-col.u-flex-gap-sm {
    width: min(var(--layout-container-inline), var(--layout-container-width));
    margin: 0 auto;
    position: relative;
    /* z-index: 2; */
}

.site-main,
.page-main {
    display: flex;
    flex-direction: column;
    gap: var(--layout-page-gap);
}

.layout-section {
    padding-block: var(--layout-section-padding-block);
    position: relative;
}

.layout-section::after {
    content: '';
    position: absolute;
    inset: var(--space-sm) 0 auto auto;
    width: var(--layout-section-stripe-width);
    height: var(--layout-section-stripe-height);
    background: var(--layout-section-stripe-gradient);
    opacity: 0.4;
    pointer-events: none;
}

.theme-build {
    --accent: var(--accent-build);
}

.theme-fix {
    --accent: var(--accent-fix);
}

.theme-extend {
    --accent: var(--accent-extend);
}

.layout-section.theme-build,
.layout-section.theme-fix,
.layout-section.theme-extend {
    position: relative;
    overflow: hidden;
}

.layout-section.theme-build::before,
.layout-section.theme-fix::before,
.layout-section.theme-extend::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
}

.layout-section.theme-build::before {
    background: radial-gradient(1000px 500px at 10% -10%, var(--accent-build), transparent 80%);
}

.layout-section.theme-fix::before {
    background: radial-gradient(1000px 500px at 90% -10%, var(--accent-fix), transparent 80%);
}

.layout-section.theme-extend::before {
    background: radial-gradient(1000px 500px at 50% -20%, var(--accent-extend), transparent 80%);
}

.layout-section--dark {
    background: var(--surface-section-dark);
    border-top: 1px solid var(--border-section-strong);
    border-bottom: 1px solid var(--border-section-soft);
}

.layout-section--surface {
    background: var(--surface-section);
    border-top: 1px solid var(--border-section-strong);
    border-bottom: 1px solid var(--border-section-strong);
}

.site-main {
    padding: var(--space-lg) 0 var(--space-xl);
}

.page-geometry {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
}

.page-geometry--triangle {
    bottom: 8vh;
    right: 6vw;
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 240px solid rgba(255, 190, 11, 0.22);
}

.page-geometry--frame {
    top: 18vh;
    left: 5vw;
    width: 180px;
    height: 180px;
    border: 24px solid rgba(255, 46, 99, 0.16);
    transform: rotate(45deg);
}

.page-geometry--ring {
    top: 46vh;
    right: 12vw;
    width: 220px;
    height: 220px;
    border: 26px solid rgba(0, 217, 255, 0.16);
    border-radius: 50%;
}

@media (max-width: 1024px) {
    .page-geometry {
        display: none;
    }
}