/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #111827;
    background-color: #fcfcfd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header Box - styled like a set box (outermost container) */
.header-box {
    position: relative;
    margin: 40px auto;
    max-width: 1600px;
    background-color: rgba(214, 39, 40, 0.1); /* Tableau red with opacity */
    border: 2px solid #D62728; /* Tableau red stroke */
    border-radius: 5px; /* Matching rx="5px" from set boxes */
    padding: 0;
    overflow: visible;
}

.header-box-purple {
    background-color: rgba(148, 103, 189, 0.1); /* Tableau purple with opacity */
    border-color: #9467BD; /* Tableau purple stroke */
    overflow: hidden;
}

.header-label {
    position: absolute;
    top: -2px;
    left: -2px;
    background-color: #D62728; /* Tableau red fill */
    border: 2px solid #D62728;
    border-radius: 5px; /* Rounded on all corners */
    padding: 20px 30px;
    min-width: 300px;
    z-index: 1;
}

.header-label-purple {
    background-color: #9467BD; /* Tableau purple fill */
    border-color: #9467BD;
    min-width: 200px;
}

.header-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
}

.header-content {
    padding: 100px 40px 40px;
    position: relative;
    width: 100%;
}

/* Outer Container Box - RectEuler */
.outer-box {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    border: 2px solid;
    border-radius: 5px; /* Matching rx="5px" from set boxes */
    padding: 0;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.05);
}

.outer-box-green {
    background-color: rgba(44, 160, 44, 0.1); /* Tableau green with opacity */
    border-color: #2CA02C; /* Tableau green stroke */
}

.outer-label {
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid;
    border-radius: 5px; /* Rounded on all corners */
    padding: 20px 30px;
    min-width: 200px;
    z-index: 10;
}

.outer-label-green {
    background-color: #2CA02C; /* Tableau green fill */
    border-color: #2CA02C;
}

.outer-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
}

.outer-content {
    position: relative;
    width: 100%;
    padding: 100px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
}

.header-content > .outer-content:first-of-type {
    padding-top: 40px;
}

/* Section Boxes - styled like set boxes, stacked vertically */
.section-box {
    position: relative;
    margin: 40px auto;
    max-width: 1600px;
    width: 100%;
    border: 2px solid;
    border-radius: 5px; /* Matching rx="5px" from set boxes */
    padding: 0;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.section-box-blue {
    background-color: rgba(31, 119, 180, 0.1); /* Tableau blue with opacity */
    border-color: #1F77B4; /* Tableau blue stroke */
}

.section-box-orange {
    background-color: rgba(255, 127, 14, 0.1); /* Tableau orange with opacity */
    border-color: #FF7F0E; /* Tableau orange stroke */
}

.section-label {
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid;
    border-radius: 5px; /* Rounded on all corners */
    padding: 20px 30px;
    min-width: 300px;
    z-index: 1;
}

.section-label-blue {
    background-color: #1F77B4; /* Tableau blue fill */
    border-color: #1F77B4;
}

.section-label-orange {
    background-color: #FF7F0E; /* Tableau orange fill */
    border-color: #FF7F0E;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
}

.section-content {
    padding: 100px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
    flex: 1;
}

/* Subsection Boxes - styled like smaller set boxes */
.subsection-box {
    background-color: transparent;
    border: 2px solid #111827;
    border-radius: 5px; /* Matching rx="5px" from set boxes */
    padding: 30px 60px 30px 30px; /* Extra padding on right to prevent overlap with white box */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

/* White square background for encoding circles */
.subsection-box::before {
    content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 1;
}

/* Encoding circles - arranged in 2x2 grid */
/* Each box shows: its section color, green (RectEuler), red (Temporal RectEuler) */
.subsection-box {
    --circle-size: 10px;
    --circle-spacing: 8px;
    --padding: 8px; /* Padding inside white box */
}

/* Encoding circles for boxes inside Original RectEuler - 2x1 grid */
/* Row 1: Green (left), Red (right) */
/* Shows: Green (Original RectEuler) + Red (Temporal RectEuler) */
.outer-box .subsection-box::after {
    content: '';
    position: absolute;
    /* White box: right: 10px, width: 44px */
    /* Top-left circle: 8px padding from left edge, so right edge at 10px + 44px - 8px - 10px = 36px */
    /* Position base circle at top-left */
    right: calc(10px + 44px - var(--padding) - var(--circle-size));
    top: calc(10px + var(--padding));
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #2CA02C; /* Green - Original RectEuler (top-left) */
    border-radius: 50%;
    z-index: 2;
    /* Create additional circle in grid pattern using box-shadow */
    /* Top-right: move right by (circle-size + spacing) = 18px (positive x-offset) */
    box-shadow: 
        calc(var(--circle-size) + var(--circle-spacing)) 0 0 0 #D62728; /* Red - Temporal RectEuler (top-right) */
}

/* Encoding circles for boxes in Temporal RectEuler but outside Original RectEuler - 1 circle */
/* Shows: Red (Temporal RectEuler) only */
.header-content > .outer-content .subsection-box::after {
    content: '';
    position: absolute;
    /* White box: right: 10px, width: 44px */
    /* Top-left circle: 8px padding from left edge, so right edge at 10px + 44px - 8px - 10px = 36px */
    /* Position base circle at top-left */
    right: calc(10px + 44px - var(--padding) - var(--circle-size));
    top: calc(10px + var(--padding));
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #D62728; /* Red - Temporal RectEuler (top-left) */
    border-radius: 50%;
    z-index: 2;
    /* No additional circles - only in Temporal RectEuler */
}

/* Encoding circles for boxes in standalone section boxes - 1 circle */
/* Shows: Blue (section box) only - not inside Temporal RectEuler */
.section-box .subsection-box::after {
    content: '';
    position: absolute;
    right: calc(10px + 44px - var(--padding) - var(--circle-size));
    top: calc(10px + var(--padding));
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #1F77B4; /* Blue - section box (top-left) */
    border-radius: 50%;
    z-index: 2;
    /* No additional circles - only in section box, not in Temporal RectEuler */
}

/* Encoding circles for boxes in footer (purple header-box) - 1 circle */
/* Shows: Purple (footer box) only - not inside Temporal RectEuler */
.header-box-purple .header-content > .outer-content .subsection-box::after {
    content: '';
    position: absolute;
    right: calc(10px + 44px - var(--padding) - var(--circle-size));
    top: calc(10px + var(--padding));
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #9467BD; /* Purple - footer box (top-left) */
    border-radius: 50%;
    z-index: 2;
    /* No additional circles - only in footer box, not in Temporal RectEuler */
}

.subsection-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subsection-box-wide {
    grid-column: 1 / -1;
}

.subsection-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.03em;
}

.subsection-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.01em;
}


/* Responsive Design */
@media (max-width: 1024px) {
    .outer-content {
        padding: 100px 20px 20px;
        flex-direction: column;
    }
    
    .section-box {
        width: 100%;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .header-box,
    .outer-box {
        margin: 20px;
        max-width: calc(100% - 40px);
    }
    
    .header-box {
        min-height: auto;
    }
    
    .header-content {
        min-height: auto;
        padding: 80px 20px 20px;
    }
    
    .outer-box {
        min-height: auto;
    }
    
    .outer-content {
        min-height: auto;
        padding: 80px 20px 20px;
    }

    .header-label,
    .outer-label,
    .section-label {
        position: relative;
        width: 100%;
        border-radius: 5px 5px 0 0;
    }

    .header-content,
    .section-content {
        padding: 40px 20px 20px;
    }

    .header-title,
    .outer-title,
    .section-title {
        font-size: 1.5rem;
    }


    .subsection-title {
        font-size: 1.1rem;
    }

    .subsection-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .header-title,
    .outer-title,
    .section-title {
        font-size: 1.25rem;
    }

}