*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#263238;overflow:hidden}body{background:#17324d}.backdrop{position:fixed;inset:0;background:linear-gradient(180deg,rgba(9,26,45,.25),rgba(5,10,20,.45)),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=80') center/cover;filter:saturate(1.05);z-index:-2}.backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 28%),linear-gradient(120deg,rgba(0,0,0,.12),rgba(0,0,0,.45));backdrop-filter:blur(1px);z-index:-1}.topbar{position:fixed;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid rgba(255,255,255,.26);border-radius:24px;background:rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.22);backdrop-filter:blur(16px);z-index:10000}.topbar h1{margin:0;font-size:clamp(1.5rem,4vw,2.5rem);letter-spacing:-.05em;color:white;text-shadow:0 2px 20px rgba(0,0,0,.25)}.topbar p{margin:.25rem 0 0;color:rgba(255,255,255,.88)}button{font:inherit;border:0;border-radius:999px;padding:.8rem 1rem;cursor:pointer}#newNoteBtn,.primary{background:linear-gradient(135deg,#ffdd58,#ff9d2e);color:#3d2700;font-weight:800;box-shadow:0 10px 25px rgba(0,0,0,.22);transition:transform .15s,box-shadow .15s}#newNoteBtn:hover,.primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.26)}#board{position:fixed;inset:0;padding-top:175px;overflow:hidden}.note{position:absolute;min-width:180px;min-height:150px;width:250px;height:230px;padding:30px 22px 20px;border-radius:3px 24px 6px 18px;background:#fff3a3;box-shadow:0 18px 28px rgba(0,0,0,.28),inset 0 -22px 45px rgba(156,115,0,.09);transform:rotate(var(--r,-1deg));user-select:none;touch-action:none;transition:box-shadow .15s,transform .15s}.note:hover{box-shadow:0 24px 40px rgba(0,0,0,.34),inset 0 -22px 45px rgba(156,115,0,.09)}.note.dragging{transform:rotate(0deg) scale(1.025);box-shadow:0 34px 58px rgba(0,0,0,.38)}.note:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.38),transparent 45%,rgba(0,0,0,.06));pointer-events:none}.pin{position:absolute;top:10px;left:50%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ef4058 38%,#9b1028);box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translateX(-50%)}.note-body{height:calc(100% - 34px);overflow:auto;white-space:pre-wrap;line-height:1.35;font-family:"Comic Sans MS","Marker Felt",cursive;font-size:1.12rem;color:#332b12}.note footer{position:absolute;left:22px;right:22px;bottom:12px;color:rgba(0,0,0,.52);font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-body{user-select:text;outline:none;border-radius:10px;padding:2px}.note-body:focus{background:rgba(255,255,255,.24);box-shadow:0 0 0 2px rgba(255,255,255,.35)}.delete,.copy{position:absolute;top:8px;width:26px;height:26px;padding:0;background:rgba(255,255,255,.42);color:rgba(0,0,0,.46);font-weight:900;z-index:2}.delete{right:8px}.copy{right:40px;font-size:.95rem}.delete:hover,.copy:hover{background:rgba(255,255,255,.8);color:#1b4d75}.delete:hover{color:#9b1028}.resize{position:absolute;right:8px;bottom:8px;width:22px;height:22px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.16) 51%);border-radius:4px}dialog{border:0;border-radius:28px;padding:0;background:rgba(255,255,255,.92);box-shadow:0 30px 100px rgba(0,0,0,.45);width:min(92vw,460px)}dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(6px)}form{padding:24px;display:grid;gap:16px}form h2{margin:0;font-size:1.6rem;letter-spacing:-.04em}label{display:grid;gap:7px;font-weight:800}input,textarea{width:100%;border:1px solid #d6d6d6;border-radius:16px;padding:13px 14px;font:inherit;background:white}textarea{min-height:130px;resize:vertical}.palette{display:flex;gap:10px}.swatch{width:38px;height:38px;padding:0;border:3px solid transparent;box-shadow:0 5px 15px rgba(0,0,0,.15)}.swatch.active{border-color:#222}.yellow{background:#fff3a3}.pink{background:#ffd1dc}.green{background:#c9f7d4}.blue{background:#cfe8ff}.orange{background:#ffd7a8}menu{display:flex;justify-content:flex-end;gap:10px;padding:0;margin:0}#cancelBtn{background:#eceff1}@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column}.topbar p{display:none}#board{padding-top:150px}.note{min-width:160px}}.toolbar{position:fixed;top:122px;left:18px;right:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(255,255,255,.16);box-shadow:0 12px 36px rgba(0,0,0,.18);backdrop-filter:blur(14px);z-index:9999}.toolbar select,.toolbar button{height:36px;border:0;border-radius:12px;padding:0 10px;background:rgba(255,255,255,.86);color:#263238;font-weight:800}.toolbar button:hover,.toolbar select:hover{background:#fff;transform:translateY(-1px)}#mdBtn{background:linear-gradient(135deg,#d7f9ff,#b8dcff)}#toolbarHint{color:rgba(255,255,255,.9);font-size:.9rem;margin-left:auto}.note.active{outline:3px solid rgba(255,255,255,.78);outline-offset:4px}.font-hand .note-body{font-family:"Comic Sans MS","Marker Felt",cursive}.font-clean .note-body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.font-serif .note-body{font-family:Georgia,"Times New Roman",serif}.font-mono .note-body{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.note-body{font-size:var(--fs,18px)}.note-body h1,.note-body h2,.note-body h3{margin:.1em 0 .25em;line-height:1.05}.note-body h1{font-size:1.55em}.note-body h2{font-size:1.35em}.note-body h3{font-size:1.18em}.note-body ul,.note-body ol{margin:.2em 0 .35em 1.25em;padding:0}.note-body blockquote{margin:.35em 0;padding:.25em .55em;border-left:4px solid rgba(0,0,0,.25);background:rgba(255,255,255,.2)}.note-body code{font-family:monospace;background:rgba(255,255,255,.35);border-radius:5px;padding:0 .25em}@media(max-width:700px){.toolbar{top:170px;max-height:112px;overflow:auto}.toolbar select,.toolbar button{height:34px;font-size:.85rem}#toolbarHint{display:none}#board{padding-top:295px}}