styles.html

<style>
    /* Base CSS for components */
    .st-emotion-cache-13ln4jf { /* Targets the sidebar container */
        width: 350px !important;
    }
    .custom-dropdown {
        position: relative; display: inline-block; width: 100%;
    }
    .size-button {
        background-color: #f0f2f6; color: #31333F; padding: 8px 12px;
        border: 1px solid #ced4da; border-radius: 0.5rem; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        width: 100%; font-size: 14px;
    }
    .size-button:hover { border-color: #4A90E2; }
    .dropdown-content {
        display: none; position: absolute; background-color: #ffffff;
        min-width: 300px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1000; border-radius: 0.5rem; padding: 8px 0; border: 1px solid #ddd;
    }
    .custom-dropdown:hover .dropdown-content { display: block; }
    .dropdown-item {
        display: flex; align-items: center; padding: 10px 15px;
        color: #31333F; text-decoration: none; gap: 15px;
    }
    .dropdown-item:hover, .dropdown-item.active { background-color: #f0f2f6; }
    .item-icon { font-size: 20px; }
    .item-text { flex-grow: 1; }
    .item-primary { font-weight: 500; }
    .item-subtitle { font-size: 12px; color: #555; }
    .item-checkmark { font-weight: bold; color: #4A90E2; width: 20px; text-align: right; }

    .dynamic-canvas-container {
        width: 100%; max-width: 90vw; margin: 2rem auto; border: 1px solid #EAECEE;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-radius: 8px; padding: 2%;
        overflow: hidden; resize: both; transition: aspect-ratio 0.3s ease-in-out;
        display: flex; flex-direction: column; background: #fff;
    }
    .dynamic-canvas-container .stTextArea textarea {
        transition: font-size 0.2s;
    }
</style>