* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}


/* общий контейнер */
.layout {
    display: flex;
    height: 100vh;
    width: 100vw;
}


/* левая часть — viewer */
.viewer {
    flex: 1;
    background: #000;
}


/* iframe занимает всё пространство */
#api-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* правая панель */
.sidebar {

    width: 320px;      /* ширина панели */
    min-width: 320px;
    max-width: 320px;

    height: 100%;

    background: #f5f5f5;

    padding: 20px;

    overflow-y: auto;  /* скролл только внутри панели */

    border-left: 1px solid #ddd;
}


.colors{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.color-option input{
display:none;
}

.circle-color{
width:36px;
height:36px;
border-radius:50%;
display:block;
cursor:pointer;
border:2px solid transparent;
}

.color-option input:checked + .circle-color{
border:2px solid red;
}