:root{--size: 250px;--paper: #ffe873;--paper-back: #f6dc5f;--bg: #f5f3ee}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}.board{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;user-select:none;-webkit-user-select:none}.pad{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);transform:translate(-50%,-50%)}.note{position:absolute;left:0;top:0;width:var(--size);height:var(--size);will-change:transform}.note .front{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);background-image:linear-gradient(to bottom,rgba(0,0,0,.035) 0,transparent 22px)}.note .flap-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:none;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(60,45,0,.28))}.note .flap{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0;background-color:var(--paper-back)}.pad .note{cursor:default}.pad .note.top{cursor:grab}.pad .note .front{box-shadow:inset 0 -1px #785f001f}.pad:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(3px,6px);box-shadow:0 6px 14px #3c2d0029,0 1px 3px #3c2d001f;background:#e6cf5a}.pad.empty:before{display:none}.note.loose{position:fixed;cursor:grab}.note.loose.settled{will-change:auto}.note.loose .front{box-shadow:0 2px 3px #3c2d002e;transition:box-shadow .2s ease}.note.loose.lifted .front{box-shadow:0 14px 18px #3c2d0038}body.grabbing,body.grabbing *{cursor:grabbing!important}.note .text{position:absolute;top:0;right:0;bottom:0;left:0;padding:30px 20px 44px;outline:none;overflow:hidden;color:#2a2410;font:600 22px/26px Caveat,Bradley Hand,cursive;caret-color:#8a6d00;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;cursor:grab;opacity:0;transition:opacity .25s ease}.note .text:focus{cursor:text}.note .text .line{position:relative;min-height:26px}.note .text.is-empty .line:first-child:before{content:"Write, or type /todo";position:absolute;color:#2a24104d;pointer-events:none}.note .text .line.todo{padding-left:21px}.note .text .check{position:absolute;left:0;top:6.5px;width:13px;height:13px;border:1.5px solid #2a2410;border-radius:3px;cursor:pointer}.note .text .line.done{color:#2a241073;text-decoration:line-through}.note .text .line.done .check{background:#2a2410}.note .text .line.done .check:after{content:"";position:absolute;left:3px;top:.5px;width:3px;height:7px;border:solid #ffe873;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}.note .doodle{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.note.doodling .doodle{pointer-events:auto;cursor:crosshair}.note .delete,.note .brush{position:absolute;bottom:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:#2a241073;cursor:pointer;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s ease,color .15s,background .15s}.note .delete{right:8px}.note .brush{right:40px}.note .delete:hover{color:#7a2e00;background:#785a001f}.note .brush:hover{color:#2a2410;background:#785a001f}.note .brush.active{color:#2a2410;background:#785a002e}.note.writable .text{opacity:1}.note.writable .delete,.note.writable .brush{opacity:1;transform:scale(1)}.grip{position:absolute;left:0;right:0;top:-22px;height:22px;z-index:5;cursor:grab}.grip:after{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:#0003;opacity:0;transition:opacity .2s ease}.pad:hover .pad-grip:after,body.grabbing .pad-grip:after,.note.loose:hover .note-grip:after,.note.loose.lifted .note-grip:after{opacity:1}.pad.full .note.top{cursor:not-allowed}.pad-hint{position:absolute;left:-20px;right:-20px;top:calc(100% + 14px);margin:0;text-align:center;font:600 19px/1.2 Caveat,Bradley Hand,cursive;color:#8a6d00;opacity:0;pointer-events:none;transition:opacity .2s ease}.pad.full:hover .pad-hint{opacity:1}.paper-crumple-host{position:fixed;z-index:100000;pointer-events:none}.paper-crumple-host *{pointer-events:none!important}.paper-crumple-host.in-trash{z-index:99998}body.carrying,body.carrying *{cursor:grabbing!important}body.over-ball,body.over-ball *{cursor:grab!important}.trash{position:fixed;right:36px;bottom:24px;width:120px;z-index:99999;pointer-events:none;transform-origin:50% 100%}.trash-art{isolation:isolate;background:var(--bg)}.trash-img{display:block;width:100%;height:auto;mix-blend-mode:multiply}.trash-placeholder{display:block;width:100%;height:auto}.trash.missing .trash-img{display:none}.trash:not(.missing) .trash-placeholder{display:none}html.desktop,html.desktop body,html.desktop .trash-art{background:transparent}html.desktop .trash-img{mix-blend-mode:normal}html.desktop .pad,html.desktop .restock{left:auto;right:48px;top:40px;transform:none}.trash.shake{animation:trash-shake .5s ease}@keyframes trash-shake{0%,to{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}.restock{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);transform:translate(-50%,-50%);border:2px dashed rgba(0,0,0,.15);background:transparent;color:#0006;font:inherit;font-size:14px;cursor:pointer}.restock:hover{border-color:#0000004d;color:#0009}.paper-crumple{position:relative;width:100%;overflow:hidden;isolation:isolate}.paper-crumple-canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.paper-crumple-fallback{position:absolute;top:50%;left:50%;width:var(--pc-image-width, 60%);height:var(--pc-image-height, 72%);-webkit-user-select:none;user-select:none;pointer-events:none}.paper-crumple-hit{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;padding:0;margin:0;border:0;background:transparent;border-radius:2px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab;outline:none!important;box-shadow:none!important}.paper-crumple-hit[data-held=true]{cursor:grabbing}.paper-crumple-hit:focus,.paper-crumple-hit:focus-visible{outline:none!important;box-shadow:none!important}.paper-crumple-focus{position:absolute;bottom:24px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}.paper-crumple-hit:not([data-pointer=true]):focus-visible+.paper-crumple-focus{opacity:.55}.paper-crumple-hit:disabled{cursor:default}.paper-crumple-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
