body { 
  margin:0; 
  font-family:sans-serif; 
  background:#f6f7fb; 
}

header { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:.5rem; 
  background:#fff; 
  box-shadow:0 2px 4px rgba(0,0,0,.05); 
}

.board { 
  position:relative; 
  width:100%; 
  height:85vh; 
  overflow:auto; 
}

.note { 
  position:absolute; 
  width:200px; 
  min-height:100px; 
  padding:1rem; 
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1); 
  cursor:move; 
  background:#fff59d; 
}

.note .note-actions { 
  position:absolute; 
  top:6px; 
  right:6px; 
  display:flex; 
  gap:4px; 
}

.note .note-actions button { 
  background:transparent;
  border:none; 
  cursor:pointer; 
  font-size:1rem; 
  line-height:1;
  padding:4px;
  border-radius:8px;
  opacity:.6;
  transition: opacity .15s ease, transform .1s ease, background .15s ease; 
}

.note .note-actions button:hover, .note .note-actions button:focus-visible { 
  opacity:1; 
  transform: scale(1.05);
  background: rgba(0,0,0,.06); 
  outline: none; 
}

.note:hover .note-actions button { 
  opacity:.9; 
}

dialog { 
  border:none; 
  border-radius:10px; 
  padding:1rem; 
  box-shadow:0 20px 50px rgba(0,0,0,.3); 
}

dialog::backdrop { 
  background:rgba(0,0,0,.35);
}

form { 
  display:flex; 
  flex-direction:column; 
  gap:.5rem; 
}

input, textarea, button { 
  font:inherit; padding:.5rem; 
}

button { 
  cursor:pointer; 
}