*{box-sizing:border-box}:root{--cream:#fff8f4;--blush:#ffe4ec;--lavender:#efe6fb;--rose:#e88fa7;--rose-deep:#d9698a;--plum:#5c4b63;--plum-soft:#8a7a92;--line:#f0dde6}body{color:var(--plum);background:linear-gradient(160deg, var(--cream) 0%, var(--blush) 55%, var(--lavender) 100%);background-attachment:fixed;min-height:100vh;margin:0;font-family:Avenir Next,system-ui,-apple-system,sans-serif}main{max-width:640px;margin:0 auto;padding:2rem 1.25rem 4rem}main.wall{max-width:880px}.landing{text-align:center;padding-top:14vh}.landing-mascot{filter:drop-shadow(0 6px 12px #d9698a40);margin-bottom:.5rem;font-size:3.5rem;display:inline-block}.tagline{color:var(--rose-deep);margin:0 0 1.5rem;font-weight:600}header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.mascot{margin-right:.4rem;display:inline-block}h1{color:var(--rose-deep);letter-spacing:.01em;margin:0 0 .5rem;font-size:1.5rem}p{color:var(--plum-soft)}button{background:var(--rose);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:.65rem 1.4rem;font-size:1rem;font-weight:600;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #d8698a59}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #d8698a66}button:disabled{opacity:.45;cursor:default;box-shadow:none}button.ghost{color:var(--plum-soft);box-shadow:none;background:0 0;padding:.35rem .8rem;font-weight:500}button.ghost:hover:not(:disabled){color:var(--rose-deep);transform:none}.hint{color:var(--plum-soft);margin:0 0 1.25rem;font-size:.9rem}.composer{border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fff9;border-radius:20px;flex-direction:column;gap:.6rem;margin-bottom:2rem;padding:1rem;display:flex}.composer textarea,.name-field{color:var(--plum);border:1px solid var(--line);font:inherit;resize:vertical;background:#fff;border-radius:14px;padding:.85rem}.name-field{font-size:.85rem}.composer textarea:focus,.edit textarea:focus,.name-field:focus{border-color:var(--rose);outline:none;box-shadow:0 0 0 3px #e88fa740}.composer button{align-self:flex-end}.board{border:1px dashed var(--rose);column-count:1;background-color:#ffffff59;background-image:radial-gradient(#d8698a14 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:24px;column-gap:1.1rem;margin:0;padding:1.5rem 1rem;list-style:none}@media (width>=480px){.board{column-count:2}}@media (width>=800px){.board{column-count:3}}.note{break-inside:avoid;background:var(--note-bg,var(--cream));transform:rotate(var(--tilt,-1deg));border-radius:6px 6px 10px 10px;margin:0 0 1.1rem;padding:1.4rem 1.1rem 1.1rem;position:relative;box-shadow:0 6px 14px #5c4b631f}.note:nth-child(7n+1){--note-bg:var(--blush);--tilt:-1.4deg}.note:nth-child(7n+2){--note-bg:var(--lavender);--tilt:1deg}.note:nth-child(7n+3){--note-bg:#fff1e6;--tilt:-.6deg}.note:nth-child(7n+4){--note-bg:var(--cream);--tilt:1.5deg}.note:nth-child(7n+5){--note-bg:#e3f6ec;--tilt:-1deg}.note:nth-child(7n+6){--note-bg:#fff6d9;--tilt:.8deg}.note:nth-child(7n){--note-bg:#e4f0fb;--tilt:-1.6deg}.note .pin{background:var(--rose-deep);border-radius:50%;width:12px;height:12px;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 2px 3px #5c4b6359}.note .download-btn{color:#fff;background:var(--rose-deep);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;min-width:0;height:22px;padding:0;font-size:.7rem;line-height:1;display:flex;position:absolute;bottom:.6rem;right:.6rem;box-shadow:0 2px 4px #5c4b6359}.note .download-btn:hover:not(:disabled){transform:scale(1.15);box-shadow:0 3px 6px #5c4b6380}.note p{white-space:pre-wrap;color:var(--plum);margin:0 0 .5rem}.note span{color:var(--plum-soft);font-size:.85rem}.actions{justify-content:flex-end;gap:.25rem;margin-top:.5rem;display:flex}.actions .ghost{padding:.25rem .6rem;font-size:.85rem}.actions .danger{color:var(--rose-deep)}.edit{flex-direction:column;gap:.5rem;display:flex}.edit textarea{color:var(--plum);border:1px solid var(--line);font:inherit;resize:vertical;background:#fff;border-radius:14px;padding:.85rem}