:root {
    --cell-width: 50px;
}

#screen {
    display: flex ;
    flex-direction: column ;
    align-items: center ;
}

#workspace {
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
     align-items: center ;
}

#source {
    font-family: monospace;
    font-size: 18px;
    line-height: 1.5;
    margin: 6px;
    padding: 1em 2em;
    background-color: #fffef2;
    width: fit-content; 
}

#viz {
    width: fit-content; 
}

.dataLine {
    align-items: center ;
    width: fit-content; 
    margin: 8px 0 ; 
}

.control {
    font-size: 8pt;
}

.control input[type=checkbox] {
    width: 8pt; 
}

/* ----- */

.stmt {
    display: block;
    width: fit-content;
}

.block {
    display: block;
    margin-left: 2em;
}

.expr {
    display: inline;
}

.for-header > * {
    display: inline;
}

/* ----- */

#step {
    display: block ;
    margin-top: 30px ;
    padding: 12px 32px ;

    font-size: 1.4rem ;
    font-weight: bold ;

    background: #d9822b ;
    color: white ;

    border: none ;
    border-radius: 8px ;

    cursor: pointer ;
}

#step:hover {
    background: #c76b28 ;
}

#step:active {
    transform: translateY(2px) ;
}

/* ----- */

.Cell.Unknown {
    background-color: lightgray;
}

.TableWidget {
    display: flex ;
}

.VarLabel, .Widget {
    font-family: monospace;
    font-size: 18px;
}

.VarLabel {
    display: inline-block;
    width: 50px ; 
    text-align: right;
    margin-right: 20px; 
}

.MovingCell { /* make sure you put here all text properties active on a .Cell */
    font-family: monospace;
    font-size: 18px;
    text-align: center ;
    line-height: 32px ;
}

.Widget {
    display: inline-block;
}

.Widget .Cell {
    border-collapse: collapse ;
    box-sizing: border-box ;
    width: calc(var(--cell-width)) ;
    height: 32px ;
    border: 1px solid black ;
    text-align: center ;
    line-height: 32px ;
    display: inline-block;
    margin: 0; 
    padding: 0;
}

.IndexWidget .Marker {
    display: inline-block;
    top: 0; 
    transform: translateX(-50%) translateY(-25%) ; 
}

.IndexWidget.reversed .Marker {
    top: -10px; 
    transform: translateX(-50%) translateY(-25%) ; 
}