html {height: 100%; width: 100%;}
body {min-height: 100vh; min-width: 100vw;}
header {
    position: fixed;
    top: 0;
    z-index: 8;
    /* justify-content: end; */
    box-shadow: 0 0 0 transparent;
    backdrop-filter: blur(4px) brightness(0.5);
}
header .title {padding-right: 12px; user-select: none;}
.backLink {user-select: none;}
/* main, .shelf {position: static; margin: 0;} */
:root {
    --h-header: 48px;
    --h-footer: 36px;
}
main {
    box-sizing: border-box;
    height: 100dvh; 
    width: 100dvw;
    height: calc(100dvh - var(--h-header) - var(--h-footer));
    margin: 0;
    top: var(--h-header);
    /* outline: 1px dashed #fff9; */
    /* outline-offset: -1px; */
    padding: 1rem;
}
.shelf {
    width: auto;
    /* width: calc(100% - 2rem); */
    padding: 1rem;
}
[id*="canvas"] {
    /* position: absolute; */
    inset: 0;
    /* top: 0; left: 0; */
    background-color: #000;
    height: 100%; width: 100%;
    height: 100vh; width: 100vw;
    height: 100dvh; width: 100dvw;
    height: 300px; width: 300px;
}
.fixed-controllers {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    padding: .5rem;
    border-radius: .5rem .5rem 0 0;
    background: #0008;
}