body:not([section="preview"]) section[name="preview"] {display: none;}
section[name="preview"] .preview-container{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 10em);
    margin-bottom: 10em;
}
section[name="preview"] .work-area{
    margin:1em;
    width: 100%;
    text-align: center;
}
section[name="preview"] .preview-footer{
    position: fixed;
    bottom: 0;
    left:0;
    right: 0;
    padding:1em;
    background-color: rgb(53, 49, 49);
    color:white;
    text-align: center;
}
section[name="preview"] button.pos{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(2, 136, 2);
    border:2px solid rgb(1, 88, 1);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="preview"] button.neg{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(255, 0, 98);
    border:2px solid rgb(255, 0, 98);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="preview"] button.neutral{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(0, 89, 255);
    border:2px solid rgb(0, 76, 216);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}