*{box-sizing:border-box;position:relative}html{font-size:16px;overflow:hidden auto}body,h1,h2,h3{margin:0}textarea{overflow:hidden;background-color:transparent;border:none;margin:0;padding:0;outline:none;font:inherit;resize:none}#app{font-family:Avenir,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--font-color)}html{--header-size: 10vh;--data-min-size: 5rem;--bg-color: rgb(100, 110, 60);--bg2-color: rgb(110, 90, 60);--font-color: rgb(190, 150, 130);background-color:var(--bg-color)}body{background-color:var(--bg-color)}#app header{display:flex;flex-direction:row;justify-content:center;align-items:center;height:var(--header-size)}.board{margin:2rem 1.5rem;background-color:var(--bg2-color);border-radius:1rem;padding:.5rem}.board .board-content>*{display:none}.board .data-view{min-height:var(--data-min-size)}.board[state=view] .data-view{display:block}.board .data-overlay{position:absolute;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;opacity:0}.board[state=view] .data-overlay{display:flex}.board[state=view] .data-overlay:hover{opacity:.3;transition:opacity .3s ease-in-out 1s}.board .data-filler{min-height:var(--data-min-size);white-space:pre-wrap}.board[state=input] .data-filler{display:block}.board .data-input{position:absolute;top:0;left:0;width:100%;height:100%}.board[state=input] .data-input{display:block}