:root {
    /* Psychelinx Color Scheme */
    --color-background: 237, 235, 231; /* #edebe7 */
    --color-foreground: 49, 41, 32; /* #312920 */
    --color-accent: 115, 133, 128; /* #738580 */
    --color-button: 18, 18, 18; /* #121212 */
    --color-link: 102, 153, 204; /* #6699cc */
    
    /* Typography */
    --font-body-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body-scale: 1;
    --font-heading-scale: 1;
    
    /* Spacing */
    --page-width: 1200px;
    --spacing-sections: 0;
    
    /* Borders and Shadows */
    --border-radius: 2px;
    --border-width: 0;
    --shadow-opacity: 0;
    
    /* Animations */
    --duration-short: 100ms;
    --duration-default: 200ms;
    --duration-medium: 300ms;
    --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: var(--font-body-family);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    color: rgb(var(--color-foreground));
    background-color: rgb(var(--color-background));
}

.container {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
    .container {
        padding: 0 5rem;
    }
}

@media screen and (min-width: 990px) {
    .container {
        padding: 0 5rem;
    }
}

.controls {
    background: rgb(255, 255, 255);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
    margin-bottom: 3rem;
    position: sticky;
    top: 2rem;
    z-index: 100;
    border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 750px) {
    .controls {
        padding: 2.5rem;
        margin-bottom: 5rem;
    }
}

.control-group {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 750px) {
    .control-group {
        gap: 3rem;
    }
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

label {
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: 1.2rem;
    color: rgba(var(--color-foreground), 0.75);
    text-transform: uppercase;
    letter-spacing: 0.13rem;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
}

select {
    padding: 1rem 1.5rem;
    border: 0.1rem solid rgba(var(--color-foreground), 0.55);
    border-radius: var(--border-radius);
    font-size: 1.4rem;
    font-family: var(--font-body-family);
    background: rgb(255, 255, 255);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: border-color var(--duration-short) ease;
    min-width: 15rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23312920' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    padding-right: 3.5rem;
}

select:hover {
    border-color: rgb(var(--color-foreground));
}

select:focus {
    outline: none;
    border-color: rgb(var(--color-foreground));
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.content {
    background: rgb(255, 255, 255);
    padding: 4rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
    min-height: 40rem;
    border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 750px) {
    .content {
        padding: 5rem;
    }
}

.content h1 {
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: calc(var(--font-heading-scale) * 3rem);
    color: rgb(var(--color-foreground));
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 0.2rem solid rgba(var(--color-foreground), 0.08);
    letter-spacing: calc(var(--font-heading-scale) * 0.04rem);
    line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media screen and (min-width: 750px) {
    .content h1 {
        font-size: calc(var(--font-heading-scale) * 4rem);
    }
}

.content h2 {
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: calc(var(--font-heading-scale) * 2rem);
    color: rgb(var(--color-foreground));
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    letter-spacing: calc(var(--font-heading-scale) * 0.04rem);
    line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media screen and (min-width: 750px) {
    .content h2 {
        font-size: calc(var(--font-heading-scale) * 2.4rem);
    }
}

.content h3 {
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: calc(var(--font-heading-scale) * 1.7rem);
    color: rgb(var(--color-foreground));
    margin-top: 2rem;
    margin-bottom: 1rem;
    letter-spacing: calc(var(--font-heading-scale) * 0.04rem);
    line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media screen and (min-width: 750px) {
    .content h3 {
        font-size: calc(var(--font-heading-scale) * 1.8rem);
    }
}

.content p {
    margin-bottom: 1.5rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    color: rgba(var(--color-foreground), 0.75);
}

.content ul, .content ol {
    margin-left: 3rem;
    margin-bottom: 1.5rem;
    color: rgba(var(--color-foreground), 0.75);
}

.content li {
    margin-bottom: 0.8rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
}

.content a {
    color: rgb(var(--color-link));
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.1rem;
    transition: text-decoration-thickness var(--duration-short) ease;
}

.content a:hover {
    text-decoration-thickness: 0.2rem;
    color: rgba(var(--color-link), 0.8);
}

.loading {
    text-align: center;
    padding: 4rem;
    color: rgba(var(--color-foreground), 0.55);
    font-size: 1.4rem;
}

.error {
    background: rgba(220, 53, 69, 0.1);
    color: rgb(220, 53, 69);
    padding: 2rem;
    border-radius: var(--border-radius);
    border-left: 0.4rem solid rgb(220, 53, 69);
}

.error h3 {
    color: rgb(220, 53, 69);
    margin-bottom: 1rem;
}

@media (max-width: 749px) {
    .container {
        padding: 0 1.5rem;
    }

    .controls {
        position: static;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .control-group {
        flex-direction: column;
        gap: 1.5rem;
    }

    .control-item {
        width: 100%;
    }

    select {
        width: 100%;
    }

    .content {
        padding: 2rem;
    }
}