* {
    font-family: monospace;
}

body {
    background-color: rgb(225, 225, 225);
    margin: 20px;
    overflow: hidden;
}

#canvas-container {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 0;
    bottom: 0;
    overflow: auto;
    transform-origin: top left;

}

#canvas-container canvas {
    display: block;
}

.p {
    padding-bottom: 0.5em;
    position: fixed;
    top: 0;
    left: 20px;
    background-color: rgba(225, 225, 225, 0.95);
    padding: 10px;
    z-index: 9999;
    margin: 0;
}

.tabulé {
    margin-left: 2.5em; 
}

.panel {
    position: fixed;
    padding: 0.75em;
    z-index: 10000;
    width: 28em;
    cursor: move;
}

.panel-main-controls {
    bottom: 447px;
    right: 20px;
    background-color: yellow;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel-export {
    bottom: 573px;
    right: 423px;
    background-color: pink;
    display: grid;
}

.panel-noise {
    bottom: 20px;
    right: 423px;
    background-color: #2aff66;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel-mouse {
    bottom: 372px;
    right: 423px;
    display: flex;
    flex-direction: column;
    background-color: #d593ff;
    gap: 12px;
}


.panel-knobs {
    right: 20px;
    bottom: 20px;
    background: #3780ffff;
    color: #000000ff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.knob-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.knob-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.knob-canvas {
    cursor: grab;
    background: transparent;
    box-sizing: border-box;
    margin-bottom: 6px;
}

.knob-label {
    font-size: 1em;
}

.knob-value {
    font-size: 1em;
    color: #ffffff;
}

.slider-label {
    font-size: 1em;
}

.export-buttons {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.btn-export {
    padding: 10px;
    width: 100%;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-export:hover {
    background-color: #444;
}


.btn-toggle-noise {
    padding: 10px;
    width: 100%;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 16px;
    width: 100%;

}

.btn-toggle-noise:hover {
    background-color: #444;
}


#file-input-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 1em;
    width: 21.5em;
    background-color: #333;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

#file-input-container:hover {
    background-color: #444;
}