.toolspace {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: white;
    user-select: none;
    opacity: 1;
}

    .toolspace.hide {
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
    }

.toolspace_cover {
    background-color: rgba(0,0,0,.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color .2s;
}

.toolspace.hide .toolspace_cover {
    background-color: transparent;
    transition: background-color .2s;
}

.toolspace_tools {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    min-width: 368px;
    height: 100%;
    background-color: rgba(64,64,64,0.9);
    transition: left .2s;
    padding: 1em 0;
    z-index: 1;
    overflow-y: auto;
}

.toolspace.hide .toolspace_tools {
    left: -100%;
    transition: left .2s;
}

.toolspace_trigger {
    width: var(--toolspace_btnsize);
    height: var(--toolspace_btnsize);
    position: fixed;
    z-index: 2;
    background-color: rgba(255,255,255,0.4);
    left: 8px;
    bottom: 8px;
    cursor: pointer;
    border-radius: 50%;
}

.toolspace_trigger_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000' stroke-linejoin='miter' stroke-linecap='butt'%3E %3Cpath d='M24 15V33' stroke='%23000' stroke-width='2' stroke-miterlimit='10' stroke-linecap='square' fill='none'%3E%3C/path%3E %3Cpath d='M33 24H15' stroke='%23000' stroke-width='2' stroke-miterlimit='10' stroke-linecap='square' fill='none'%3E%3C/path%3E %3Cpath d='M24 45C35.598 45 45 35.598 45 24C45 12.402 35.598 3 24 3C12.402 3 3 12.402 3 24C3 35.598 12.402 45 24 45Z' stroke='%23000' stroke-width='2' stroke-miterlimit='10' stroke-linecap='square' fill='none'%3E%3C/path%3E %3C/g%3E%3C/svg%3E");
    background-size: contain;
    width: 100%;
    height: 100%;
    transition: transform .2s;
}

    .toolspace_trigger_icon.triggered {
        transform: rotate(45deg);
        transition: transform .2s;
    }

@media screen and (max-width: 560px) {
    .toolspace_tools {
        width: 100vw;
    }
}

.content {
    display: block;
    word-wrap: break-word;
    word-break: break-word;
    padding: 1.4em 0;
    max-width: 210mm;
    margin: auto;
}

    .content h2 {
        font-size: 1.4em;
        text-align: center;
    }

    .content p {
        text-indent: 2em;
        min-height: 1em;
    }

.toolspace_chapters a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 8px 0;
    text-align: center;
    background-color: #333;
}

    .toolspace_chapters a.selected {
        color: #777;
        pointer-events: none;
        cursor: default;
        font-weight: bold;
    }

    .toolspace_chapters a:nth-child(even) {
        background-color: #444;
    }

.toolspace_book {
    padding-bottom: var(--toolspace_btnsize);
}

.toolspace_book_copyright {
    text-align: center;
}

body {
    min-height: 100vh;
}

:root {
    --toolspace_btnsize: 1.2cm;
}