:root{--desk: #242b26;--desk-deep: #1a201c;--ink: #40372b;--ink-soft: #5c5243;--paper-white: #ede7d8;--paper-white-dim: rgba(237, 231, 216, .55);--paper-white-faint: rgba(237, 231, 216, .34);--butter: #ffe27a;--blush: #ffc9d4;--mint: #c8eccf;--sky: #c3dff7;--tangerine: #ffd3a3;--font-ui: "Gabarito", system-ui, sans-serif;--font-ink: "Caveat", "Segoe Print", cursive;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{height:100%;overscroll-behavior:none}body{font-family:var(--font-ui);background-color:var(--desk);background-image:radial-gradient(120% 90% at 50% 8%,rgba(255,255,255,.045),transparent 60%),radial-gradient(140% 110% at 50% 110%,var(--desk-deep) 0%,transparent 55%);color:var(--paper-white);overflow:hidden;user-select:none;-webkit-user-select:none}body:before{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none;z-index:1}#app{position:relative;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;z-index:2}.topbar{display:flex;align-items:flex-start;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top)) 20px 0}.wordmark{font-size:.82rem;font-weight:600;letter-spacing:.22em;color:#f2ecdb;background:linear-gradient(#20261f,#161b17);padding:7px 13px 8px 15px;border-radius:3px;transform:rotate(-1.2deg);box-shadow:inset 0 1px #ffffff17,inset 0 -1px #00000059,0 2px 4px #00000059}.topbar-side{display:flex;align-items:center;gap:12px}.note-count{font-size:.72rem;font-weight:500;letter-spacing:.14em;color:var(--paper-white-dim)}.fan-toggle{display:grid;place-items:center;width:40px;height:40px;border:none;border-radius:8px;background:#ffffff0a;color:var(--paper-white-dim);cursor:pointer;transition:background .15s,color .15s}.fan-toggle:hover,.fan-toggle[aria-expanded=true]{background:#ffffff17;color:var(--paper-white)}.desk{display:grid;place-items:center;min-height:0}.stack-area{display:grid;justify-items:center;gap:26px}.stack{position:relative;width:min(78vw,380px);aspect-ratio:1 / 1.06;perspective:1000px}.hint{font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--paper-white-faint);animation:hint-in .8s 1.2s ease both}@keyframes hint-in{0%{opacity:0;transform:translateY(4px)}}.note{--depth: 0;--lift: 0;--peel: 0;position:absolute;inset:0;border-radius:2px 2px 4px 3px;color:var(--ink);touch-action:none;transform-origin:50% 0;transform:translate(calc(var(--jx, 0px) + var(--dx, 0) * 1px + var(--depth) * 3px),calc(var(--jy, 0px) + var(--dy, 0) * 1px + var(--depth) * 9px)) rotate(calc(var(--jr, 0deg) + var(--dx, 0) * .05deg)) scale(calc(1 - var(--depth) * .022)) rotateX(calc(var(--peel) * -18deg));box-shadow:0 1px 2px #0a0e0b40,0 calc(3px + (var(--lift) + var(--peel)) * 12px) calc(9px + (var(--lift) + var(--peel)) * 22px) rgba(10,14,11,calc(.24 + (var(--lift) + var(--peel)) * .14));filter:sepia(var(--sepia, 0)) saturate(var(--sat, 1)) brightness(var(--bright, 1));transition:box-shadow .18s ease}.note:before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:.06;pointer-events:none}.paper-butter{background:linear-gradient(164deg,color-mix(in srgb,var(--butter),white 10%),var(--butter) 52%,color-mix(in srgb,var(--butter),#9c7a2f 12%))}.paper-blush{background:linear-gradient(164deg,color-mix(in srgb,var(--blush),white 10%),var(--blush) 52%,color-mix(in srgb,var(--blush),#a05a6c 12%))}.paper-mint{background:linear-gradient(164deg,color-mix(in srgb,var(--mint),white 10%),var(--mint) 52%,color-mix(in srgb,var(--mint),#4f7d5c 12%))}.paper-sky{background:linear-gradient(164deg,color-mix(in srgb,var(--sky),white 10%),var(--sky) 52%,color-mix(in srgb,var(--sky),#4a6b8c 12%))}.paper-tangerine{background:linear-gradient(164deg,color-mix(in srgb,var(--tangerine),white 10%),var(--tangerine) 52%,color-mix(in srgb,var(--tangerine),#a06a33 12%))}.note-glue{position:absolute;inset:0 0 auto;height:15%;background:linear-gradient(rgba(64,55,43,.075),rgba(64,55,43,.02) 72%,transparent);border-radius:inherit;pointer-events:none}[data-age="1"]{--sepia: .12;--sat: .93;--ear: 12}[data-age="2"]{--sepia: .26;--sat: .85;--ear: 17}.note:after,.fan-note:after{content:"";position:absolute;right:0;bottom:0;width:calc(var(--ear, 0) * 1px);height:calc(var(--ear, 0) * 1px);background:linear-gradient(315deg,#171c1861 0 46%,#40372b4d 46% 52%,#ffffffb8 52% 68%,#ffffff61);border-radius:0 0 3px;pointer-events:none}.note-curl{position:absolute;inset:auto 0 0;height:calc(var(--peel) * 42%);background:linear-gradient(to top,rgba(31,26,18,.34),rgba(31,26,18,.08) 55%,rgba(255,255,255,.22) 96%,transparent);border-radius:inherit;opacity:var(--peel);pointer-events:none}.note[data-depth="0"]{cursor:grab}.note.held{--lift: .5;--bright: 1.015}.note.dragging{--lift: 1;cursor:grabbing}.note.peeling{z-index:30}.note:focus-visible{outline:2px dashed rgba(244,239,223,.75);outline-offset:5px}.note-text{position:absolute;inset:0;padding:15% 20px 20px;font-family:var(--font-ink);font-weight:500;line-height:1.22;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden}.ink-lg{font-size:2.05rem}.ink-md{font-size:1.6rem}.ink-sm{font-size:1.28rem}.note-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit;overflow:visible}.note-ink path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.92}.note.pen-on .note-ink--live{pointer-events:auto;cursor:crosshair;touch-action:none}.note.rise{animation:rise .32s cubic-bezier(.25,.8,.35,1.1) both}@keyframes rise{0%{transform:translate(var(--jx, 0px),calc(var(--jy, 0px) + 12px)) rotate(var(--jr, 0deg)) scale(.982)}to{transform:translate(var(--jx, 0px),var(--jy, 0px)) rotate(var(--jr, 0deg)) scale(1)}}.note.slap{animation:slap .34s cubic-bezier(.3,.9,.4,1.12) both}@keyframes slap{0%{transform:translate(var(--jx, 0px),calc(var(--jy, 0px) - 14px)) rotate(calc(var(--jr, 0deg) + 4deg)) scale(1.12);opacity:.4}70%{transform:translate(var(--jx, 0px),var(--jy, 0px)) rotate(var(--jr, 0deg)) scale(.992);opacity:1}to{transform:translate(var(--jx, 0px),var(--jy, 0px)) rotate(var(--jr, 0deg)) scale(1)}}.note.editing{cursor:auto;transform:translate(var(--jx, 0px),var(--jy, 0px)) rotate(calc(var(--jr, 0deg) * .25));--lift: .5}.editor{position:absolute;inset:0;display:flex;flex-direction:column}.editor-area{position:static;flex:1;width:100%;border:none;background:transparent;resize:none;color:var(--ink);caret-color:var(--ink)}.editor-area:focus{outline:none}.editor-area::placeholder{color:var(--ink-soft);opacity:.55}.editor-bar{display:flex;align-items:center;justify-content:space-between;padding:0 14px 14px;position:relative;z-index:2}.editor-tools{display:flex;align-items:center;gap:10px}.pen-btn,.stroke-undo{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:50%;background:#40372b1a;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}.pen-btn[aria-pressed=true]{background:var(--ink);color:var(--paper-white)}.stroke-undo,.note.pen-on .color-dots{display:none}.note.pen-on .stroke-undo{display:grid}.color-dots{display:flex;gap:8px}.color-dot{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;box-shadow:inset 0 -2px 3px #40372b2e,0 1px 2px #0a0e0b40;transition:transform .12s ease}.color-dot:hover{transform:scale(1.12)}.color-dot[aria-checked=true]{outline:2px solid var(--ink);outline-offset:2px}.done-btn{font-family:var(--font-ui);font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--paper-white);background:#2b332c;border:none;border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 2px 5px #0a0e0b4d;transition:background .15s}.done-btn:hover{background:#38423a}.empty-note{position:absolute;inset:0;display:grid;place-content:center;gap:6px;background:transparent;border:2px dashed var(--paper-white-faint);border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s}.empty-note:hover{border-color:var(--paper-white-dim);background:#ffffff05}.empty-title{font-family:var(--font-ink);font-size:2.2rem;color:var(--paper-white-dim)}.empty-sub{font-size:.7rem;font-weight:500;letter-spacing:.16em;color:var(--paper-white-faint)}.dock{display:grid;place-items:center;padding:14px 0 max(22px,env(safe-area-inset-bottom))}.add-btn{position:relative;width:60px;height:60px;border:none;border-radius:5px;background:linear-gradient(164deg,color-mix(in srgb,var(--butter),white 10%),var(--butter) 55%,color-mix(in srgb,var(--butter),#9c7a2f 10%));color:var(--ink);cursor:pointer;transform:rotate(-2deg);box-shadow:0 1px 2px #0a0e0b4d,0 5px 12px #0a0e0b4d;transition:transform .15s ease,box-shadow .15s ease}.add-btn:before{content:"";position:absolute;inset:3px -2px -3px 2px;border-radius:5px;background:color-mix(in srgb,var(--butter),#6d5a28 22%);z-index:-1;transform:rotate(1.6deg)}.add-btn:hover{transform:rotate(-2deg) translateY(-2px) scale(1.03);box-shadow:0 2px 3px #0a0e0b4d,0 9px 18px #0a0e0b57}.add-btn:active{transform:rotate(-2deg) scale(.97)}.fan{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#1a201ce0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .24s ease}.fan.open{opacity:1}.fan-head{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 22px 6px}.fan-title{font-size:.7rem;font-weight:500;letter-spacing:.16em;color:var(--paper-white-dim)}.fan-close{font-family:var(--font-ui);font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--paper-white);background:#ffffff12;border:none;border-radius:999px;padding:8px 16px;cursor:pointer}.fan-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-content:start;padding:18px 22px calc(30px + env(safe-area-inset-bottom));max-width:720px;width:100%;margin:0 auto}.fan-note{position:relative;aspect-ratio:1 / 1;border:none;border-radius:2px;color:var(--ink);cursor:pointer;text-align:left;transform:rotate(var(--jr, 0deg));box-shadow:0 1px 2px #0a0e0b47,0 5px 12px #0a0e0b42;filter:sepia(var(--sepia, 0)) saturate(var(--sat, 1));transition:transform .15s ease;animation:fan-pop .3s calc(var(--i, 0) * 30ms) cubic-bezier(.25,.8,.35,1.15) both}.fan-note:hover{transform:rotate(var(--jr, 0deg)) scale(1.04)}@keyframes fan-pop{0%{opacity:0;transform:rotate(var(--jr, 0deg)) translateY(14px) scale(.94)}}.fan-note .note-glue{height:18%}.fan-note-text{position:absolute;inset:0;padding:20% 12px 12px;font-family:var(--font-ink);font-weight:500;font-size:1.08rem;line-height:1.2;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden}.fan-flight{position:fixed;z-index:100;margin:0;pointer-events:none;transform-origin:top left;animation:none}.undo-chip{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:14px;background:#161b17;color:var(--paper-white);font-size:.8rem;font-weight:500;letter-spacing:.04em;padding:10px 12px 10px 18px;border-radius:999px;box-shadow:0 4px 14px #0006;animation:chip-in .24s cubic-bezier(.25,.8,.35,1.15) both}.undo-chip.leaving{animation:chip-out .22s ease both}@keyframes chip-in{0%{opacity:0;transform:translate(-50%,10px)}}@keyframes chip-out{to{opacity:0;transform:translate(-50%,10px)}}.undo-chip button{font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--butter);background:#ffe27a1a;border:none;border-radius:999px;padding:7px 14px;cursor:pointer}.build-tag{position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));z-index:3;font-family:var(--font-ink);font-size:.95rem;color:var(--paper-white-faint);transform:rotate(-2deg);pointer-events:none;-webkit-user-select:none;user-select:none}button:focus-visible{outline:2px dashed rgba(244,239,223,.75);outline-offset:3px}@media(min-width:720px){.stack{width:min(48vh,420px)}.fan-grid{grid-template-columns:repeat(4,1fr)}.wordmark{font-size:.9rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}