/* Main Layout */
main {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 6);
    max-width: 1600px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 16) calc(var(--spacing) * 16);
    position: relative;
}

/* Decorative Elements */
.decorative-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-base-800);
}

.line {
    position: absolute;
    height: 1px;
    background: var(--color-base-900);
}

.accent-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-100);
}

.star {
    position: absolute;
    font-size: 2.5rem;
    color: var(--color-foreground);
}

.code-preview {
    background: #2f3032;
    border: 1px solid #3e4451;
    border-radius: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
    font-family: var(--font-geist-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #abb2bf;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Decorative positioning */
.dot-1 {
    top: 15%;
    left: 55%;
}

.dot-2 {
    top: 30%;
    right: 25%;
}

.dot-3 {
    top: 45%;
    right: 32%;
}

.dot-4 {
    bottom: 35%;
    left: 52%;
}

.line-1 {
    top: 15%;
    right: 10%;
    width: 60px;
}

.line-2 {
    top: 25%;
    right: 15%;
    width: 80px;
}

.line-3 {
    top: 40%;
    right: 8%;
    width: 100px;
}

.line-4 {
    bottom: 30%;
    left: 45%;
    width: 70px;
}

.accent-dot-1 {
    top: 25%;
    right: 35%;
}

.accent-dot-2 {
    bottom: 35%;
    right: 15%;
}

.star {
    top: 35%;
    right: 42%;
}