/* layout: every note fits in the window, no scroll; the drawing is cropped to cover the window */
:root{--paper:#fff;--ink:#000;color-scheme:light}
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper);overscroll-behavior:none}
#ctl{position:fixed;top:8px;left:8px;z-index:10}
#g{display:grid;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100vw;height:100vh;height:100dvh;background:var(--paper)}
.t{position:relative;overflow:hidden;cursor:crosshair}
.f,.b,.fl{position:absolute;inset:0}
.f{z-index:1;background-color:var(--paper);background-image:url(images/atlas.png);background-repeat:no-repeat}
.b{z-index:0;display:none;background-color:var(--ink);background-image:url(images/back.jpg);background-repeat:no-repeat}
.t.on .b{display:block}
.t.done .f{display:none}
.fl{z-index:2;pointer-events:none}